How to make separate navigation for users and admin panel?

Question

React

I am working on a React web application to route different pages using React Router.
There are 2 main parent routes in total, namely (Client and Admin). So when user clicks for example: localhost:3000 it should by default go to home page (Client Component) and localhost:3000 / admin path to (Admin page).

For user - everything is OK, everything works.

function App() {
  return (
    <div className="App">
      <BrowserRouter>

          <Switch>
           <Route path='/' component={ UserPage } />
           <Route path='/admin' component={ AdminPage } />
          </Switch>

      </BrowserRouter>
    </div>
  );
}

<div className="App">
      <BrowserRouter>

        <Header />

          <Switch>
            <Route path="/" component={ Home } exact />
            <Route path="/catalog" component={ CatalogPage } exact />
            <Route path="/products" component={ ProductPage } exact />
            <Route path="/products/:id" component={ ItemPage } exact />

            <Route path="/login" component={ Login } exact />
            <Route path="/registration" component={ Registration } exact />
          </Switch>

        <Footer />

      </BrowserRouter>
    </div>

But, now when I want to do the routing for the admin, I get the user interface...:

function AdminPage() {
  return (
    <div className="App">
      <BrowserRouter>
          <Switch>
            <Route path="/" component={ Home } exact/>
          </Switch>
      </BrowserRouter>
    </div>
  );
}