I've an asp.net core with reactjs project, got this error: "react-dom.development.js:26923 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app." coming from app.js file: "import 'antd/dist/reset.css'; import './components/index.css'; import Zigzag from './components/zigzag.js' import Hero from './components/hero.js'; import Head from './components/header.js'; import Stsectask from './components/stsectask.js' import EmailVerification from './components/EmailVerification.js' import Ndsectask from './components/ndsectask.js' import Foot from './components/foot.js'; import Profile from './components/Profile.js'; import Admin from './components/Admin.js'; import Mstatic from './components/ManageStatic.js'; import Mtasks from './components/ManageTasks.js'; import MUsers from './components/ManageUsers.js'; import Terms from './components/Terms.js'; import Private from './components/Privacypolicy.js'; import ATask from './components/AddTask.js'; import UTask from './components/UploadTask.js'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { MenuOutlined, CloseOutlined } from '@ant-design/icons'; import { Layout, Divider, ConfigProvider, Button, Typography, Row, Col, Anchor, Modal, message } from 'antd'; import { useState, useEffect } from 'react'; import Verify from './components/Verify.js'; const App = () => { const isLoggedIn = !!localStorage.getItem('token'); const [open, setOpen] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false); const [modalText, setModalText] = useState('Content of the modal'); const showModal = () => { setOpen(true); }; const handleOk = () => { setModalText(""); setConfirmLoading(true); setTimeout(() => { setOpen(false); setConfirmLoading(false); }, 2000); }; const handleCancel = () => { console.log('Clicked cancel button'); setOpen(false); }; const userIdD = localStorage.getItem('userId'); useEffect(() => { const sekaha = async () => { try { const response = await fetch(`/api/user/${userIdD}`); const data = await response.json(); setUsers(data); } catch (error) { console.error('There was an error!', error); message.error('حدث خطأ يرجى المحاولة وقت اخر'); } }; sekaha(); }, []); const [users, setUsers] = useState(null); const HomeComponents = () => { return ( <> {isLoggedIn ? ( // Render elements for authenticated users <> <Hero showModal={showModal} /> <Zigzag /> </> ) : ( // Render elements for anonymous users <> <Hero showModal={showModal} /> <Zigzag /> </> )} </> ); }; const TasksComponents = () => { return ( <> {isLoggedIn ? ( // Render elements for authenticated users <><Stsectask /> <Ndsectask /></> ) : ( // Render elements for anonymous users <> <Hero showModal={showModal} /> <Zigzag /> </> )} </> ); }; const VerifyComponents = () => { return ( <> <EmailVerification /> </> ); }; const ProfileComponents = () => { return ( <> <Profile /> </> ); }; const TVerifyComponents = () => { return ( <> <Verify /> </> ); }; const AdminComponents = () => { return ( <> {users && users.username === "admin" && <Admin />} </> ); }; const ManageTasks = () => { return ( <> <Mtasks /> </> ); }; const ManageStatic = () => { return ( <> <Mstatic /> </> ); }; const ManageUsers = () => { return ( <> <MUsers /> </> ); }; const TermsComponent = () => { return ( <> <Terms /> </> ); }; const PrivacyComponent = () => { return ( <> <Private /> </> ); }; const AddTaskComponent = () => { return ( <> <ATask /> </> ); }; const UploadTaskComponent = () => { return ( <> <UTask /> </> ); }; const [collapsed, setCollapsed] = useState(true); const { Title } = Typography; const { Header, Sider, Content, Footer } = Layout; return ( <Router> <ConfigProvider theme={{ token: { colorPrimary: '#5E4AE3', }, }} > {users && users.username === "admin" && <Admin />} <Layout> <Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth="0" style={{ border: '0', backgroundColor: '#000000', position: 'fixed', // Add this line zIndex: 100, // Add this line height: '100vh' }}> <Row align="middle"> <Col> <Button type="text" icon={collapsed ? <MenuOutlined /> : <CloseOutlined />} onClick={() => setCollapsed(!collapsed)} style={{ fontSize: '16px', width: 64, height: 64, color: '#5E4AE3', whiteSpace: 'nowrap' }} /> </Col> <Col><Title style={{ fontSize: '22px', color: '#DDDCDC' }}>كريبتوتاسكي</Title></Col> </Row> <Anchor style={{ color: '#DDDCDC' }} items={[ { key: 'Main', href: '#Main', title: 'الرئيسية', }, { key: 'Who-are-we', href: '#Who-are-we', title: 'من نحن', }, { key: 'Contact-us', href: '#Contact-us', title: 'تواصل معنا', }, ]} /> </Sider> <Layout className="layout" direction="rtl"> <Header style={{ borderBottom: 'solid 2px #1e1e1e', paddingInline: '0', backgroundColor: '#121212' }}> <Head open={open} confirmLoading={confirmLoading} modalText={modalText} showModal={showModal} handleOk={handleOk} handleCancel={handleCancel} collapsed={collapsed} setCollapsed={setCollapsed} /> </Header> <Divider style={{ margin: '0', backgroundColor: '#262626' }} /> <Content style={{ backgroundColor: '#121212', border: '0' }}> <div className="site-layout-content" style={{ background: '#121212', border: '0' }}> <Routes> <Route exact path="/" Component={HomeComponents} /> <Route path="/tasks" Component={TasksComponents} /> <Route path="/verifyEmail/:id" Component={VerifyComponents} /> <Route path="/profile" Component={ProfileComponents} /> <Route path="/ManageUsers" Component={ManageUsers} /> <Route path="/ManageStatic" Component={ManageStatic} /> <Route path="/ManageTasks" Component={ManageTasks} /> <Route path="/TermsOfUse" Component={TermsComponent} /> <Route path="/PrivacyPolicy" Component={PrivacyComponent} /> <Route path="/AddTask" Component={AddTaskComponent} /> <Route path="/UploadTask/:id" Component={UploadTaskComponent} /> <Route path="/Verify/:id" Component={TVerifyComponents} /> </Routes> </div> </Content> <Divider style={{ margin: '0', backgroundColor: '#262626' }} /> <Footer id="Contact-us" style={{ backgroundColor: '#121212', color: 'DDDCDC', borderTop: 'solid 2px 1E1E1E' }}> <Foot /> </Footer> </Layout> </Layout> </ConfigProvider> </Router> ); }; export default App;" figure out the issue and fix it. note that those are the versions in the package.json: "    "@ant-design/icons": "^5.1.4",
    "antd": "^5.7.0",
    "bootstrap": "^5.2.0",
    "http-proxy-middleware": "^2.0.6",
    "jquery": "^3.6.0",
    "jwt-decode": "^3.1.2",
    "merge": "^2.1.1",
    "oidc-client": "^1.11.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-bootstrap": "^0.26.2",
    "react-router-dom": "^6.14.2",
    "react-scripts": "^5.0.1",
    "reactstrap": "^9.1.3",
    "rimraf": "^3.0.2",
    "web-vitals": "^2.1.4","