Maximum depth update exceeded when navigating to routes react-router v6

I am using react-router v6 I am trying to protect some routes and not give access to users if they are not authenticated. I am using the token to determine if user is authenticated or not. After I login into the app using login details instead of returning todos route it doesn’t show anything. I get this error message on the console Maximum depth update exceeded . However, if I’m not protecting the routes it works fine.

This is how I am protecting routes.

const token = useSelector(state => state.authDetails.token );

  let routes = (
      <Route path='/signUp' exact  element={<SignUpForm />}/>
      <Route path='/'  exact element={<LoginForm />}/>
      <Route path='*' replace element={<Navigate to="/" />}/>

  if(token !== null ) {
    routes = (

        <Route path='/todos' element={<AddTodo/>}/>
        <Route path='/logout' element={<Logout/>}/>
        <Route path='*' replace element={<Navigate to="/" />}/>

 return (
    <div className="App">
         <Navbar />