How can I make navigation to appear only certain screens?

Question

I am trying to make navigation bar to appear on users page not login page. I did the below. The route for login page works fine but not users page. I don't see any errors on browser or console, and it doesn't seem rendering it. Can you guide me to identify the issue?

const App = () => {
  return (
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="login" element={<SignIn />} />
          <Route component={DefaultContainer} />
        </Route>
      </Routes>
  );
};



const DefaultContainer = () => (
  <>
    <Navbar />
    <Route element={<RequireAuth allowedRoles={[ROLES.Admin]} />}>
      <Route path="users" element={<Users />}/>
    </Route>
  </>
);

Navbar.js

const Navbar = () => {
    return (
      <>
        <Nav className={"nav"}>
          <NavMenu>
            <NavLink to="/users" activestyle>
              Users
            </NavLink>
          </NavMenu>
        </Nav>
      </>
    );
  };

  export default Navbar;