I want to render the user module and admin module seperately but I seem to not know how route work in react.js

Question

This is app.js

function App() {
  return (
    <div className="App">
      {/* User Module */}
      <Navbar />
      <Routes>
        <Route path="/Home" element={Home()} />
        <Route path="/Login" element={Login()} />
        <Route path="/Register" element={Register()} />
        <Route path="/Listings" element={Listings()} />
        <Route path="/houseinfo/:id" element={<HouseInfo />} />
        <Route path="/Contact" element={Contact()} />
        <Route path="/AboutUs" element={AboutUs()} />
        <Route path="/Calculator" element={Calculator()} />
        <Route path="/Loginmenu" element={Loginmenu()} />
      </Routes>
      <Footer />

      {/* Admin Module */}
      <Sidebar />
      <Routes>
      <Route path="/Dashbaord" element={Dashboard()} />
      <Route path="/Properties-Buy" element={Buy()} />
      <Route path="/User-Admin" element={AdminTable()} />
      <Route path="/User-Seller" element={SellerTable()} />
      <Route path="/User-Buyer" element={BuyerTable()} />
      <Route path="/Feedback" element={Feedback()} />
      </Routes>
    </div>
  );
}

export default App;

I am trying to render both admin and user module but also make sure that navbar and footer only render on when user module is being rendered and when I login in from the admin login the admin module to be rendered with the sidebar