Web3 library and keep logging state after refresh the page

Question

I'm making application using web3 ethereum wallet but when the users goes from a first page to another when he refreshes the page he's no longer connected to the website. Here my home page where I handle the logging step with Moralis library:

function Main() {
    const [errorMessage, setErrorMessage] = useState(null);
    const [numberOfContractDeployed, setNumberOfContractDeployed] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    const { logout, authenticate, isAuthenticated, user } = useMoralis();

    useEffect(() => {
        setIsLoading(true);
        getData();
    }, [])


  return (
        <div className='App-header App'>
        {
          isLoading ? <p>fetching data</p> : 
            <div>
                <h1 style={{paddingTop:'60px'}}>Where events meet Nfts</h1>
                <h2>So far we have deployed {numberOfContractDeployed} contracts for events</h2>
            <div>
        </div>
            {(!isAuthenticated) ? 
                <div>
                    <p>Welcome</p>
                    <p>Connect your wallet to get started</p>
                    <button onClick={() => authenticate({ signingMessage:"Nft Night Authentification", onError: (error) => setErrorMessage(error.message)})}>Connect Wallet</button>
                    <p>{errorMessage}</p>
                </div>
                : <div>
                    <Create user={user.get('accounts')} />
                    <button onClick={() => logout()}>Disconnect</button>
                </div>
            }
        </div>
        }
      </div>
  )
}

export default Main

if I refresh this page I don't lose anything but now with react router I go the another page the account one:

function Account() {
    const [isLoading, setIsLoading] = useState(false);
    const [userAddress, setUserAddress] = useState(null);
    const { isAuthenticated, user} = useMoralis();


    const getUserInfo = async () => {
        if(isAuthenticated == true){
            let tmp = await user.get('accounts')[0];
            setUserAddress(tmp);
            getEventsCreated(userAddress);
        }
        else{
            console.log(isAuthenticated);
            setIsLoading(false);
            return setErrorMessage("You need to be logged in to view this page");
        }
    };

    useEffect(() => {
        setIsLoading(true);
        getUserInfo();
    }, [])

    return (
    <div className='profile'>
        {isAuthenticated ?
        <div>
            <h1>In this tab you will find all the collection you have created</h1>
            <h2> as {user.get('accounts')}</h2>
            { isLoading ? <p>Fetching data</p> : 
            <div>
                {arrayContract}
            </div>
            }
        </div>
        :
        <div>
            <p style={{color:'red'}}>{errorMessage}</p>
        </div>
        }
    </div>
  )
};

export default Account

this account component returns my logged in address correctly but if I refresh isAuthenticated is always false after a refresh.