React router dom V6 renders a blank page

Question

I'm trying to render a SideBar, NavBar, and Container which has children but react-router-dom keeps throwing an error saying Navbar is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>. I've tried wrapping them with React.Fragment but it still didn't work

function App() {
  const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
  const isAdmin = JSON.parse(
    JSON.parse(localStorage.getItem("persist:root") || "{}").user
  ).currentUser.isAdmin;

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Navbar />
        <Container>
          <SideBar />
          <Route path="/" element={<Home />} />
          <Route path="/users" element={<UserList />} />
          <Route path="/user/:id" element={<User />} />
          <Route path="/Products" element={<ProductsList />} />
          <Route path="/Product/:id" element={<Product />} />
          <Route path="/addProduct" element={<AddProduct />} />
        </Container>
      </Routes>
    </Router>
  );
}