diff --git a/client/src/components/parts-queue-card/parts-queue-card.component.jsx b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
index debe98f8a..d4b988da7 100644
--- a/client/src/components/parts-queue-card/parts-queue-card.component.jsx
+++ b/client/src/components/parts-queue-card/parts-queue-card.component.jsx
@@ -3,7 +3,7 @@ import {Card, Divider, Drawer, Grid} from "antd";
 import queryString from "query-string";
 import React from "react";
 import {useTranslation} from "react-i18next";
-import {Link, useHistory, useLocation} from "react-router-dom";
+import {Link, useNavigate, useLocation} from "react-router-dom";
 import {QUERY_PARTS_QUEUE_CARD_DETAILS} from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import JobsDetailHeader from "../jobs-detail-header/jobs-detail-header.component";
@@ -29,7 +29,7 @@ export default function PartsQueueDetailCard() {
 
     const searchParams = queryString.parse(useLocation().search);
     const {selected} = searchParams;
-    const history = useHistory();
+    const history = useNavigate();
     const {loading, error, data} = useQuery(QUERY_PARTS_QUEUE_CARD_DETAILS, {
         variables: {id: selected},
         skip: !selected,
@@ -40,7 +40,7 @@ export default function PartsQueueDetailCard() {
     const {t} = useTranslation();
     const handleDrawerClose = () => {
         delete searchParams.selected;
-        history.push({
+        history({
             search: queryString.stringify({
                 ...searchParams,
             }),
@@ -49,7 +49,7 @@ export default function PartsQueueDetailCard() {
 
     return (
         <Drawer
-            visible={!!selected}
+            open={!!selected}
             destroyOnClose
             width={drawerPercentage}
             placement="right"