Major package updates & refactor for React 18.

src/components/pages/routes/routes.page.jsx

@@ -1,6 +1,7 @@
 import { Layout } from "antd";
 import React from "react";
 import { connect } from "react-redux";
+import { Routes } from "react-router-dom";
 import { Route } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
@@ -36,10 +37,12 @@ export function RoutesPage({ bodyshop }) {
       </Layout.Sider>
       <Layout style={{ background: "#fff" }}>
         <Layout.Content style={{ marginLeft: "1rem", height: "100%" }}>
-          <Route exact path="/settings" component={SettingsPage} />
-          <Route exact path="/reporting" component={ReportingPage} />
-          <Route exact path="/scan" component={ScanPage} />
-          <Route exact path="/" component={JobsPage} />
+          <Routes>
+            <Route exact path="/settings" element={<SettingsPage />} />
+            <Route exact path="/reporting" element={<ReportingPage />} />
+            <Route exact path="/scan" element={<ScanPage />} />
+            <Route exact path="/" element={<JobsPage />} />
+          </Routes>
         </Layout.Content>
         <ReleaseNotes />
         <UpdateManagerOrganism />