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

JavaScript
#1

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 = (
    <Routes>
      
      <Route path='/signUp' exact  element={<SignUpForm />}/>
      <Route path='/'  exact element={<LoginForm />}/>
      <Route path='*' replace element={<Navigate to="/" />}/>
    </Routes>
  )

  if(token !== null ) {
    routes = (
      <Routes>

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

 return (
    <div className="App">
      <header>
         <Navbar />
      </header>
        
         {routes}

        
    </div>
  );