Auth0 client is null in React Component on page refresh

Help
3

It is suppossed that auth0 manage in it owns the getTokenSilently when the page is refreshed, I’ll describe each step to reproduce the error I’m getting:

  1. First my app gets into this component

     import React from 'react';
 import { useAuth0 } from "../react-auth0-spa";
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import fondo from '../img/fondo.jpg'

 const styles = ({ spacing }) =>
     createStyles({
         button: {
             width: '100%',
         },
         icon: {
             marginRight: spacing.unit,
         },
     });

 const LoginForm = ({ classes, userLogin }) => {
     const { loginWithRedirect, loading, user } = useAuth0();

     const handleLogin = () => {
         loginWithRedirect();
         
     };

     return (
         <div
         style={{
             height: '100%',
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
             background: `url(${fondo})`
         }}>
             <CardActions>
                 <Button
                     variant="contained"
                     type="submit"
                     color="primary"
                     onClick={handleLogin}
                     disabled={loading}
                 >
                     {loading && (
                         <CircularProgress
                             size={18}
                             thickness={2}
                         />
                     )}
                     LogIn
                 </Button>
             </CardActions>
         </div>
     );
 }

 export default LoginForm;

  2. then I click the LogIn button

  3. then I login with auth0, then I return to my page and shows me the component that it has to show me, where I have a LogOut Button like this:

     import React, { forwardRef } from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import ExitIcon from '@material-ui/icons/PowerSettingsNew';
 import { useAuth0 } from "../react-auth0-spa";

 const MyLogoutButton = forwardRef((props, ref) => {
     const { isAuthenticated, logout } = useAuth0();
     const handleClick = () => {
         logout();
     }
     return (
         <MenuItem
             onClick={handleClick}
             ref={ref}
         >
             <ExitIcon /> Logout
         </MenuItem>
     );
 });

 export default MyLogoutButton;

  4. I refresh the page

  5. after refreshing the page, I click the logout button and show me this error:

Error
Error1006×530 44.9 KB

my conclusion about this error is that the auth0Client becomes null, but I don’t understand why and how to solve that.

thank you for helping me