useNavigate sometimes works, sometimes doesn't (after API call)

I made a login page in TS React that sends an API request to authenticate the user.

The API call returns a token, after that the user should be redirected to "/" (if successful).

Returning the token works 100% every time, but the redirect sometimes fails.

It seems like the page is being rerendered instead of redirecting. What am I doing wrong?

import { useNavigate } from "react-router-dom";

function Login() {
  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [tokenProvided, setTokenProvided] = React.useState<boolean>(false);

  const navigate = useNavigate();
  
  useEffect(() => {
    document.title = "Login";
    if(tokenProvided){
      navigate('/')
    }
  }, [tokenProvided]);


  const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      const loginData: loginData = { username, password };
      const responseData = await getLoginToken(loginData);
      localStorage.setItem("token", responseData.token);
      const userAuthentificationToken = localStorage.getItem("token");
      axios.defaults.headers.common["Authorization"] = `Bearer ${userAuthentificationToken}`;
      setTokenProvided(true);
    } catch (error) {
      createErrorToast("Invalid username or password.");
    }
  return (
    <Page backgroundColorActive={false} navbarActive={false}>
      <LoginFormWrapper>
        ...bla...

        <LoginForm onSubmit={handleLogin}>
          ...bla...
          <LoginFormButton type="submit">Login</LoginFormButton>
        </LoginForm>
      </LoginFormWrapper>
    </Page>
  );
}

export default Login;

The behaviors is as follows:

• I enter the credentials on the page
• I hit submit
• I can see it working (takes a moment for the api call to return)
• The site rerenders
• I can see the token in local storage

Sometimes it will in fact redirect, but I don't know why or how or when.

Edit:
Here is my route protection:

App.tsx:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProtectedRoute, { ProtectedRouteProps } from "./helper/restrictedRoute";

const isAuthenticated = localStorage.getItem("token") !== null;
const defaultProtectedRouteProps: Omit<ProtectedRouteProps, "outlet"> = {
  isAuthenticated: isAuthenticated,
  authenticationPath: "/login",
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Unprotected routes: These routes can be accessed without being logged in */}
        <Route path="/login" element={<Login />} />
        {/* Protected routes: These routes can only be accessed while being logged in */}
         <Route index element={<ProtectedRoute {...defaultProtectedRouteProps} outlet={<Home />} />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

RestrictedRoute.tsx:

import { Navigate } from "react-router-dom";

export type ProtectedRouteProps = {
  isAuthenticated: boolean;
  authenticationPath: string;
  outlet: JSX.Element;
};

export default function ProtectedRoute({ isAuthenticated, authenticationPath, outlet }: ProtectedRouteProps) {
  if (isAuthenticated) {
    return outlet;
  } else {
    return <Navigate to={{ pathname: authenticationPath }} />;
  }
}

The routing protection seems to be the problem, the else statement in RestrictedRoute.tsx gets executed, but I don't know how to fix that.

The localStorage is checked only once when the App file/component is processed/mounted. isAuthenticated is computed once outside anything in the app.

const isAuthenticated = localStorage.getItem("token") !== null;

The localStorage check should be moved into the ProtectedRoute and checked when the component renders. ProtectedRoute should also render the Outlet component for protected nested routes to render their content into.

import { Navigate, Outlet } from "react-router-dom";

export type ProtectedRouteProps = {
  authenticationPath: string;
};

export default function ProtectedRoute({ authenticationPath }: ProtectedRouteProps) {
  const isAuthenticated = localStorage.getItem("token") !== null;

  return isAuthenticated
    ? <Outlet />
    : <Navigate to={authenticationPath} replace />;
}

The routes written as follows:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ProtectedRoute, { ProtectedRouteProps } from "./helper/restrictedRoute";

const defaultProtectedRouteProp: ProtectedRouteProps = {
  authenticationPath: "/login",
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Unprotected routes: These routes can be accessed without being logged in */}
        <Route path="/login" element={<Login />} />

        {/* Protected routes: These routes can only be accessed while being logged in */}
         <Route element={<ProtectedRoute {...defaultProtectedRouteProps} />}>
           <Route path="/" element={<Home />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
export default App;