Avoid login form flashing in React

Question

I have a signup/login workflow in React (NextJS), and everything is working correctly; i made a custom hook to remotely check if the user is authenticated based on localStorage jwt:

import React, { useState, useEffect } from 'react';
import axios from '../lib/api';
const useUser = () => {
  const [logged, setIsLogged] = useState(false);
  const [user, setUser] = useState('');
  useEffect(async () => {
    const jwt = localStorage.getItem('jwt');
    if (!jwt) return;
    await axios
      .get('/api/users/me', {
        headers: {
          Authorization: `Bearer ${jwt}`,
        },
      })
      .then((response) => {
        setUser(response.data);
        setIsLogged(true);
      })
      .catch((error) => {});
  }, []);

  return [logged, user, setIsLogged];
};
export default useUser;

This hooks works corectly in 99% of cases, but when i go on login form page, the login form flashes for a sec to logged in users, since the logged status is false before the check is initialized

import React, { useEffect, useState } from 'react';
import useUser from '../../lib/useUser';
import { useRouter } from 'next/router';

import LoginForm from '../../components/LoginForm';

function Login() {


  const { push } = useRouter();
  const [logged] = useUser();
  console.log(ljwt, logged);
  if (logged) {
    //push('/');
    return <p>nored</p>;
  }
  if (!logged) {
    return <LoginForm />;
  }
}

export default Login;

how can i avoid this? i tried to pass to useUser the jwt, so it assume the user is logged in while performing the remote check, but it is not really working as expected. any suggestion?