Created a separate router file

.gitingore

@@ -0,0 +1 @@
+node_modules/

src/App.jsx

@@ -1,14 +1,16 @@
+import React, { createContext, useState } from "react";
 import { Box, CssBaseline, ThemeProvider } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
 import { Navbar, SideBar } from "./scenes";
 import { Outlet } from "react-router-dom";
-import { createContext, useState } from "react";
+
 export const ToggledContext = createContext(null);
 
 function App() {
   const [theme, colorMode] = useMode();
   const [toggled, setToggled] = useState(false);
   const values = { toggled, setToggled };
+
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>

src/Router.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import App from "./App";
+import {
+  Dashboard,
+  Team,
+  Invoices,
+  Contacts,
+  Form,
+  Bar,
+  Line,
+  Pie,
+  FAQ,
+  Geography,
+  Calendar,
+  Stream,
+} from "./scenes";
+
+const AppRouter = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<App />}>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/team" element={<Team />} />
+          <Route path="/contacts" element={<Contacts />} />
+          <Route path="/invoices" element={<Invoices />} />
+          <Route path="/form" element={<Form />} />
+          <Route path="/calendar" element={<Calendar />} />
+          <Route path="/bar" element={<Bar />} />
+          <Route path="/pie" element={<Pie />} />
+          <Route path="/stream" element={<Stream />} />
+          <Route path="/line" element={<Line />} />
+          <Route path="/faq" element={<FAQ />} />
+          <Route path="/geography" element={<Geography />} />
+        </Route>
+      </Routes>
+    </Router>
+  );
+};
+
+export default AppRouter;

src/main.jsx

@@ -1,50 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
-import {
-  Route,
-  RouterProvider,
-  createBrowserRouter,
-  createRoutesFromElements,
-} from "react-router-dom";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import AppRouter from './Router';
+import './index.css';
 
-import {
-  Dashboard,
-  Team,
-  Invoices,
-  Contacts,
-  Form,
-  Bar,
-  Line,
-  Pie,
-  FAQ,
-  Geography,
-  Calendar,
-  Stream,
-} from "./scenes";
-
-const router = createBrowserRouter(
-  createRoutesFromElements(
-    <Route path="/" element={<App />}>
-      <Route path="/" element={<Dashboard />} />
-      <Route path="/team" element={<Team />} />
-      <Route path="/contacts" element={<Contacts />} />
-      <Route path="/invoices" element={<Invoices />} />
-      <Route path="/form" element={<Form />} />
-      <Route path="/calendar" element={<Calendar />} />
-      <Route path="/bar" element={<Bar />} />
-      <Route path="/pie" element={<Pie />} />
-      <Route path="/stream" element={<Stream />} />
-      <Route path="/line" element={<Line />} />
-      <Route path="/faq" element={<FAQ />} />
-      <Route path="/geography" element={<Geography />} />
-    </Route>
-  )
-);
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <RouterProvider router={router} />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <AppRouter />
+    </React.StrictMode>
+);