I want to split my web app into 2 parts using react router. however iam using a router inside of one of the previously mentioned routes. Its nested

/src
|-- /components
|   |-- /signin
|       |-- SignIn.js
|       |-- /home
|           |-- Home.js
|
|           |-- /dashboard
|               |-- Dashboard.js
|    |-- /assignee
|-- /App.js
|-- /index.js

As you can see i want to split into 2 parts(signin(adimin part), assignee(user part)).
I am using router for signin and assignee
Also i want to use router for home page, to display dashboard and other pages
How do i make it possible

///////////////////////////////////////////////////////////////

function App() {
  return (
    <Router>
      <div className="maindiv">
        <Routes>
          <Route path="/" element={<SignIn />} />
          <Route path="/assignment" element={<AssigneePage />} />
        </Routes>
      </div>
    </Router>
  );
}

///////////////////////////////////////////////////////////////

function Home() {
  return (
    <div>
      <Container className="content">
        <div className="side-nav">
          <Nav />
        </div>
        <div className="main-content">
          <Routes>
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/review" element={<Review />} />
          </Routes>
        </div>
      </Container>
    </div>
  );
}

//////////////////////////////////////////////////////////////////

Home is stacked inside Signup

When i try http://localhost:3000/dashboard it gives me this error
history.ts:501 No routes matched location “/dashboard”