diff --git a/package-lock.json b/package-lock.json
index f83f24c5c6..54197fd4fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,16 +21,17 @@
         "framer-motion": "^4.1.17",
         "polished": "3.4.1",
         "pretty-bytes": "^5.6.0",
-        "react": "^17.0.2",
+        "react": "^18.3.1",
         "react-debounce-input": "3.2.2",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "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",
         "react-virtualized": "9.22.3",
         "react-virtualized-auto-sizer": "^1.0.24",
         "react-window": "^1.8.6",
@@ -61,12 +62,12 @@
         "@storybook/storybook-deployer": "^2.8.16",
         "@storybook/theming": "^8.3.6",
         "@testing-library/jest-dom": "^5.14.1",
-        "@testing-library/react": "^11.2.7",
+        "@testing-library/react": "^15.0.7",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.5.0",
-        "@types/react": "^17.0.39",
-        "@types/react-dom": "^17.0.11",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-table": "^7.7.11",
@@ -3575,6 +3576,14 @@
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "dev": true
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -4910,35 +4919,31 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "7.31.2",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz",
-      "integrity": "sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
         "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
-        "lz-string": "^1.4.4",
-        "pretty-format": "^26.6.2"
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "dependencies": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
-      },
-      "engines": {
-        "node": ">=6.0"
+        "dequal": "^2.0.3"
       }
     },
     "node_modules/@testing-library/dom/node_modules/chalk": {
@@ -4957,6 +4962,32 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4980,20 +5011,27 @@
       }
     },
     "node_modules/@testing-library/react": {
-      "version": "11.2.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz",
-      "integrity": "sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==",
+      "version": "15.0.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-15.0.7.tgz",
+      "integrity": "sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^7.28.1"
+        "@testing-library/dom": "^10.0.0",
+        "@types/react-dom": "^18.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@testing-library/react-hooks": {
@@ -5052,9 +5090,9 @@
       }
     },
     "node_modules/@types/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true
     },
     "node_modules/@types/babel__core": {
@@ -5435,23 +5473,22 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "17.0.83",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz",
-      "integrity": "sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==",
+      "version": "18.3.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "^0.16",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "17.0.25",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz",
-      "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
       "dev": true,
       "dependencies": {
-        "@types/react": "^17"
+        "@types/react": "*"
       }
     },
     "node_modules/@types/react-router": {
@@ -5508,12 +5545,6 @@
       "integrity": "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==",
       "dev": true
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
-    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -12435,19 +12466,6 @@
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -13767,7 +13785,8 @@
     "node_modules/isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true
     },
     "node_modules/isbinaryfile": {
       "version": "4.0.10",
@@ -16772,20 +16791,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -18648,12 +18653,11 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -18727,16 +18731,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-dropzone": {
@@ -18863,55 +18866,35 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
-      "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "dependencies": {
+        "@remix-run/router": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
-      "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
       "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.2.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router/node_modules/path-to-regexp": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
-      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/react-router/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/react-select": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-select/-/react-select-4.3.1.tgz",
@@ -18930,6 +18913,18 @@
         "react-dom": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/react-shallow-renderer": {
+      "version": "16.15.0",
+      "resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
+      "integrity": "sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-table": {
       "version": "7.8.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz",
@@ -18942,6 +18937,24 @@
         "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0"
       }
     },
+    "node_modules/react-test-renderer": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.3.1.tgz",
+      "integrity": "sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==",
+      "dependencies": {
+        "react-is": "^18.3.1",
+        "react-shallow-renderer": "^16.15.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-test-renderer/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -19574,11 +19587,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -19987,12 +19995,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -21117,17 +21124,17 @@
       }
     },
     "node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
-      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
       "dependencies": {
-        "@emotion/memoize": "^0.9.0"
+        "@emotion/memoize": "^0.8.1"
       }
     },
     "node_modules/styled-components/node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ=="
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
     "node_modules/styled-components/node_modules/@emotion/unitless": {
       "version": "0.7.5",
@@ -21529,12 +21536,8 @@
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
-      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true
     },
     "node_modules/title-case": {
       "version": "2.1.1",
@@ -22531,11 +22534,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 64b897d83f..a868848960 100644
--- a/package.json
+++ b/package.json
@@ -49,12 +49,12 @@
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^8.3.6",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.0",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.11",
@@ -109,16 +109,17 @@
     "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-debounce-input": "3.2.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "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",
     "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
diff --git a/src/lib/components/emptystate/Emptystate.component.tsx b/src/lib/components/emptystate/Emptystate.component.tsx
index 41c95b8e7a..a39e412593 100644
--- a/src/lib/components/emptystate/Emptystate.component.tsx
+++ b/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>
       )}
diff --git a/src/lib/components/inputlist/InputList.component.tsx b/src/lib/components/inputlist/InputList.component.tsx
index 783cdbf6aa..0977bf1a72 100644
--- a/src/lib/components/inputlist/InputList.component.tsx
+++ b/src/lib/components/inputlist/InputList.component.tsx
@@ -5,7 +5,7 @@ import { Input } from '../inputv2/inputv2';
 import { AddButton, SubButton } from './InputButtons';
 
 export type InputListProps<T> = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
-  ref: RefCallBack;
+  ref?: RefCallBack;
   min?: string | number;
   max?: string | number;
   maxLength?: number;
diff --git a/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx b/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx
index 8dde187940..f815be05bc 100644
--- a/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx
+++ b/src/lib/components/linetemporalchart/MetricTimespanProvider.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import { useEffect, useState, createContext, useContext } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { QueryTimeSpan, queryTimeSpansCodes } from '../constants';
 import { useLocation } from 'react-router-dom';
-import { QueryTimeSpan } from '../constants';
-import { queryTimeSpansCodes } from '../constants';
 export const MetricsTimeSpanContext = createContext<QueryTimeSpan | null>(null);
 export const MetricsTimeSpanProvider = ({
   children,
+  location,
 }: {
   children: JSX.Element;
+  location?: ReturnType<typeof useLocation>;
 }) => {
   // the default timespan is the last 24h
   const [queryTimeSpanCode, setQueryTimeSpanCode] = useState(
     queryTimeSpansCodes[1],
   );
-  const urlSearchParams = new URLSearchParams(useLocation().search);
+  const urlSearchParams = new URLSearchParams(location?.search);
   const queryTimeSpan = urlSearchParams.get('from');
   // Sync url timespan to local timespan
   useEffect(() => {
diff --git a/src/lib/components/tablev2/SearchWithQueryParams.tsx b/src/lib/components/tablev2/SearchWithQueryParams.tsx
index 12890c4ab7..8efbda41f5 100644
--- a/src/lib/components/tablev2/SearchWithQueryParams.tsx
+++ b/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,7 +10,7 @@ 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);
@@ -18,7 +18,7 @@ export function SearchWithQueryParams(props: SearchWithQueryParamsProps) {
   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') {
diff --git a/src/lib/components/tablev2/TableCommon.tsx b/src/lib/components/tablev2/TableCommon.tsx
index a3e29c653c..fe9ce0a3f7 100644
--- a/src/lib/components/tablev2/TableCommon.tsx
+++ b/src/lib/components/tablev2/TableCommon.tsx
@@ -22,7 +22,9 @@ type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 > = {
   rows: Row<DATA_ROW>[];
-  RenderRow: ComponentType<ListChildComponentProps<Row<DATA_ROW>[]>>;
+  RenderRow: ComponentType<
+    React.PropsWithChildren<ListChildComponentProps<Row<DATA_ROW>[]>>
+  >;
   rowHeight: TableHeightKeyType;
   setHasScrollbar: React.Dispatch<React.SetStateAction<boolean>>;
   hasScrollbar?: boolean;
diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
index f7ff371c3a..734fe4513d 100644
--- a/src/lib/components/tabsv2/Tabsv2.component.tsx
+++ b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -1,33 +1,31 @@
 import React, {
   createContext,
+  ReactElement,
+  useCallback,
   useEffect,
   useState,
-  useCallback,
-  ReactElement,
 } from 'react';
 import {
-  TabBar,
+  Outlet,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import styled from 'styled-components';
+import { ButtonIcon } from '../buttonv2/Buttonv2.component';
+import { BasicText, EmphaseText, SecondaryText } from '../text/Text.component';
+import { ScrollButton } from './ScrollButton';
+import {
   ScrollableContainer,
+  TabBar,
   TabContent,
   TabItem,
   TabsContainer,
   TabsScroller,
 } from './StyledTabs';
-import {
-  useHistory,
-  useLocation,
-  useRouteMatch,
-  matchPath,
-  Route,
-  Switch,
-} from 'react-router-dom';
-import { SecondaryText, BasicText, EmphaseText } from '../text/Text.component';
-import { ScrollButton } from './ScrollButton';
-import { Tab } from './Tab';
-import { TabProps, Query } from './Tab';
+import { Query, Tab, TabProps } from './Tab';
 import { useScrollingTabs } from './useScrollingTabs';
-import { ButtonIcon } from '../buttonv2/Buttonv2.component';
-import styled from 'styled-components';
 
 type TabsProps = {
   activeTabColor?: string;
@@ -59,8 +57,8 @@ function Tabs({
   ...rest
 }: TabsProps) {
   const location = useLocation();
-  const history = useHistory();
-  const { url } = useRouteMatch();
+  const navigate = useNavigate();
+  const url = location.pathname;
   const [selectedTabIndex, setSelectedTabIndex] = useState<
     number | null | undefined
   >(null);
@@ -101,24 +99,26 @@ function Tabs({
   };
 
   const getPushHistoryPath = (path: string, query?: Query): string => {
+    const sanitizedSegment = path.replace(/^\/+/, '');
+    const replaceUrl = location.pathname.replace(/[^/]+$/, sanitizedSegment);
+
     if (path.startsWith('/')) {
-      return `${path}${serialize(query)}`;
+      return `${replaceUrl}${serialize(query)}`;
     }
-    return `${url}/${path}${serialize(query)}`;
+
+    return `${replaceUrl}/${path}${serialize(query)}`;
   };
 
   useEffect(() => {
     let hasSelectedTab = false;
     filteredTabsChildren.forEach((child, index) => {
+      const fullPath = child.props.path.startsWith('/')
+        ? child.props.path
+        : url + '/' + child.props.path;
+
       const isSelected =
-        !!matchPath(location.pathname, {
-          path: child.props.path.startsWith('/')
-            ? child.props.path
-            : url + '/' + child.props.path,
-          exact: child.props.exact,
-          strict: child.props.strict,
-          sensitive: child.props.sensitive,
-        }) && (child.props.query ? matchQuery(child.props.query) : true);
+        location.pathname.match(new RegExp(`^${fullPath}$`, 'i')) &&
+        (child.props.query ? matchQuery(child.props.query) : true);
 
       if (isSelected) {
         setSelectedTabIndex(index);
@@ -127,6 +127,7 @@ function Tabs({
     });
     if (!hasSelectedTab) setSelectedTabIndex(null);
   }, [location.pathname, filteredTabsChildren, matchQuery]);
+
   const {
     scrollButtonEndRef,
     scrollButtonStartRef,
@@ -149,12 +150,13 @@ function Tabs({
       ...childRest
     }: TabProps = child.props;
     const isSelected = selectedTabIndex === index;
+    const realPath = `/${path.split('/').pop()}`;
     return (
       <TabItem
         className={`sc-tabs-item ${isSelected ? 'selected' : ''}`}
         key={index}
         role="tab"
-        onClick={() => history.push(getPushHistoryPath(path, query))}
+        onClick={() => navigate(getPushHistoryPath(realPath, query))}
         selected={isSelected}
         tabHoverColor={tabHoverColor}
         inactiveTabColor={inactiveTabColor}
@@ -168,7 +170,7 @@ function Tabs({
             event.key === 'Spacebar'
           ) {
             event.preventDefault();
-            history.push(getPushHistoryPath(path, query));
+            navigate(getPushHistoryPath(realPath, query));
           }
         }}
         {...childRest}
@@ -218,33 +220,29 @@ function Tabs({
             />
           )}
         </ScrollableContainer>
-
-        {filteredTabsChildren.map((tab, index) => (
-          <Route
-            exact={tab.props.exact}
-            sensitive={tab.props.sensitive}
-            strict={tab.props.strict}
-            path={
-              tab.props.path.startsWith('/')
-                ? tab.props.path
-                : url + '/' + tab.props.path
-            }
-            key={index}
-          >
-            {!tab.props.query ||
-            (tab.props.query && matchQuery(tab.props.query)) ? (
-              <TabContent
-                className="sc-tabs-item-content"
-                tabContentColor={tabContentColor}
-                withoutPadding={tab.props.withoutPadding}
-              >
-                {tab.props.children}
-              </TabContent>
-            ) : (
-              <></>
-            )}
-          </Route>
-        ))}
+        <Routes>
+          {filteredTabsChildren.map((tab, index) => {
+            const path = tab.props.path.split('/').pop();
+            return (
+              <Route
+                key={index}
+                path={`/${path}`}
+                element={
+                  <>
+                    <TabContent
+                      className="sc-tabs-item-content"
+                      tabContentColor={tabContentColor}
+                      withoutPadding={tab.props.withoutPadding}
+                    >
+                      {tab.props.children}
+                    </TabContent>
+                    <Outlet />
+                  </>
+                }
+              />
+            );
+          })}
+        </Routes>
       </TabsContainer>
     </TabsContext.Provider>
   );
@@ -252,4 +250,4 @@ function Tabs({
 
 Tabs.Tab = Tab;
 // re-export Tab
-export { Tabs, Tab };
+export { Tab, Tabs };
diff --git a/src/lib/components/toast/ToastProvider.tsx b/src/lib/components/toast/ToastProvider.tsx
index 420d5efddb..340d246e1d 100644
--- a/src/lib/components/toast/ToastProvider.tsx
+++ b/src/lib/components/toast/ToastProvider.tsx
@@ -14,7 +14,7 @@ export const ToastContext = createContext<ToastContextType | undefined>(
 interface ToastProviderProps {
   children: ReactNode;
 }
-export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+export const ToastProvider: React.FC<React.PropsWithChildren<ToastProviderProps>> = ({ children }) => {
   const [toastProps, setToastProps] = useState<ToastContextState | null>(null);
 
   const showToast = (toastProps: ToastContextState) => {
diff --git a/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx b/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx
index 7e15e46f61..54f2cc4aed 100644
--- a/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx
+++ b/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx
@@ -1,11 +1,11 @@
 import { ComponentType, useState } from 'react';
-import { Column, Table } from '../../components/tablev2/Tablev2.component';
-import { Box, Button } from '../../next';
 import { useMutation, UseMutationOptions } from 'react-query';
-import { AttachmentOperation, AttachmentAction } from './AttachmentTypes';
+import { useNavigate } from 'react-router';
 import { useTheme } from 'styled-components';
-import { useHistory } from 'react-router';
 import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
+import { Column, Table } from '../../components/tablev2/Tablev2.component';
+import { Box, Button } from '../../next';
+import { AttachmentAction, AttachmentOperation } from './AttachmentTypes';
 
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
@@ -40,7 +40,9 @@ export function AttachmentConfirmationModal<
   resourceName: string;
   resourceType: RESOURCE_TYPE;
   redirectUrl: string;
-  EntityIcon: ComponentType<{ type: ENTITY_TYPE | RESOURCE_TYPE }>;
+  EntityIcon: ComponentType<
+    React.PropsWithChildren<{ type: ENTITY_TYPE | RESOURCE_TYPE }>
+  >;
   cancelButtonDisabled?: boolean;
   onCancel?: () => void;
   onExit?: (
@@ -48,7 +50,7 @@ export function AttachmentConfirmationModal<
     failedOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
 }) {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -133,7 +135,7 @@ export function AttachmentConfirmationModal<
       onExit(successfulOperations, failedOperations);
     }
     handleClose();
-    history.push(redirectUrl);
+    navigate(redirectUrl);
   };
   const modalFooter = () => {
     return (
@@ -282,7 +284,7 @@ export function AttachmentConfirmationModal<
         disabled={cancelButtonDisabled}
         onClick={() => {
           if (onCancel) onCancel();
-          history.push(redirectUrl);
+          navigate(redirectUrl);
         }}
       />
       <Button