Update react-router to v6 and refactor navigation hooks in components

package.json

@@ -115,8 +115,8 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
+    "react-router": "^6.28.0",
+    "react-router-dom": "^6.28.0",
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-test-renderer": "^18.3.1",

src/lib/components/emptystate/Emptystate.component.tsx

@@ -4,7 +4,7 @@ import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon, IconName } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
 import { CoreUITheme } from '../../style/theme';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 
 export type Props = {
   listedResource: {
@@ -48,7 +48,7 @@ export const ActionWrapper = styled.div`
 function EmptyState(props: Props) {
   const { icon, listedResource, link, resourceToCreate, backgroundColor } =
     props;
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <EmptystateContainer
       className="sc-emptystate"
@@ -74,7 +74,7 @@ function EmptyState(props: Props) {
             icon={<Icon name="Create-add" />}
             type="button"
             variant="primary"
-            onClick={() => history.push(link)}
+            onClick={() => navigate(link)}
           />
         </ActionWrapper>
       )}

src/lib/components/tablev2/SearchWithQueryParams.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { TableSearch as Search, SearchProps } from './Search';
 
 export type SearchWithQueryParamsProps = {
@@ -10,15 +10,15 @@ export type SearchWithQueryParamsProps = {
 export function SearchWithQueryParams(props: SearchWithQueryParamsProps) {
   const { queryParams = 'search', onChange, ...rest } = props;
   const { search, pathname } = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const params = new URLSearchParams(search);
   const initialValue = params.get(queryParams) || '';
   const [value, setValue] = useState(initialValue);
 
   function handleOnChange(value: string) {
     const { onChange } = props;
     params.set(queryParams, value);
-    history.replace(`${pathname}?${params.toString()}`);
+    navigate(`${pathname}?${params.toString()}`, { replace: true });
     setValue(value);
 
     if (typeof onChange === 'function') {