Context resetuje się po odświeżeniu strony

Przechowuję zalogowanego użytkownika w takim kontekście:

export interface IAuthContext {
  auth: IMe | null;
  setAuth: (user: IMe | null) => void;
}

const AuthContext = React.createContext<IAuthContext>({
  auth: null,
  setAuth: (auth: IMe | null) => {}
});

export default AuthContext;

A oto mój główny App component, gdzie zapodaję context providera:

const App: FC = () => {

  const [auth, setAuth] = useState<IMe | null>(null); // problematic line

  return (
    <AuthContext.Provider value={{auth, setAuth}}>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Main/>}/>
          <Route path="/login" element={<Login/>}/>
          <Route path="/register" element={<Register/>}/>
          <Route path="/about" element={<About/>}/>
        </Routes>
      </BrowserRouter>
    </AuthContext.Provider>
  );
}

Koncept jest taki:
Wartość kontekstu jest zmieniana poprzez zanestowany komponent Login, w którym mam formularz logowania. Po wysłaniu formularza, czyli po zalogowaniu, leci axiosowy getMe, a wynik jest ustawiany z powrotem do kontekstu za pomocą setAuth.

Pozornie wszystko działa ok, ale...

Jeśli zmienię ścieżkę URL ręcznie w pasku przeglądarki i zatwierdzę enterem, to wystąpi odświeżenie strony i poleci re-render całego komponentu App - i wtedy wartość contextu z powrotem ustawi się na defaultową wartość nulla, a wszystko to z powodu zaznaczonej problematycznej linii.

Mój problem jest dość prosty, ale nie jestem frontendowcem i się na tym nie znam. Może ktoś wytłumaczyć jak się zabezpieczyć przed tym re-renderem, a zatem jak się zabezpieczyć przed ustawianiem z powrotem contextu na domyślną null wartość? Dzięki!

Możesz zapisywać token w sesji/cookie tak, żeby był już dostępny po odświeżeniu i później go sprawdzać, czy aby na pewno jest on prawidłowy, a nie jakiś podstawiony przez użytkownika

const [auth, setAuth] = useState<IMe | null>(typeof localStorage === 'object' ? localStorage.getItem('auth-token') || null : null);

useEffect(() => {
  const getAuthToken = async (): Promise<void> => {
    const response = await fetch(...);
    const json = await response.json();

    if (json.token) {
      setAuth(json.token);

      if (typeof localStorage === 'object') {
        localStorage.setItem('auth-token', json.token);
      }
    }
  }

  getAuthToken();
}, [auth]);