Successful login return undefined user and isAuthenticated as false

Help
,
1

Im trying to make a simple authentication in my react app. When I finish the auth with the loginWithRedirect() method the logs of my Auth0 application says that the login was successful but the object returned from useAuth0 hook have the user property as undefined and IsAuthenticated as false.

Here is my main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { Auth0Provider } from '@auth0/auth0-react';

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

ReactDOM.createRoot(document.getElementById('root')).render(
  //<React.StrictMode>
    <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={window.location.origin}
        cacheLocation={"localstorage"}
        onRedirectCallback={(state) => {console.log(state)}}
    >
        <App />

    </Auth0Provider>
  //</React.StrictMode>
  ,
)

and here is my login page

import {useEffect} from "react";
import { useAuth0 } from '@auth0/auth0-react';

const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

    return <button onClick={() => loginWithRedirect()}>Login with LinkedIn</button>;
};

const LogoutButton = () => {
    const { logout } = useAuth0();
    return <button onClick={() => logout({ returnTo: window.location.origin })}>Logout</button>;
};

const Profile = () => {
    const { user, isAuthenticated } = useAuth0();

    return (
        isAuthenticated && (
            <div>
                <img src={user.picture} alt={user.name} />
                <h2>{user.name}</h2>
                <p>{user.email}</p>
            </div>
        )
    );
};

const Login = () => {

    return (
        <div>
            <LoginButton />
            <LogoutButton />
            <Profile />
        </div>
    )
}

export default Login;