I have created routes for page navigation in React JS, now I want to make some of them protected, like I want some them to be accessible only when user Logged In.

const [isLoggedIn, setIsLoggedIn] = useState(false); useEffect(() => { const token = localStorage.getItem("token"); setIsLoggedIn(!!token); }, []); <Route path='/login' element={<Login />} /> <Route path='/signup' element={<SignUp />} /> Route path='/casting/calls/creation' element={isLoggedIn? <CastingCallsCreation /> : <Navigate to='/login' />} /> <Route path='/user/film/booth' element={isLoggedIn? <UserFilmPitchingBooth />: <Navigate to='/login' />} />

here is how I have tried, but cause problem like when I try to navigat to /casting/calls/creation after login successful in login API call, then navigation does not work, it gives successful message for login but does not navigate to that page.