Why im able to use my variable in one component and not in another? useContext

Question

Im using use context for storing user data when i loggin. I have the following context component, LoginContext.js:

import React, { createContext, useState } from "react";
import jwt_decode from 'jwt-decode';


const LoginContext = createContext();

export function LoginProvider({children}) {

    const [user, setUser] = useState({}) 
    const [isLoggedIn, setIsLoggedIn ] = useState(false)

    function handleCallbackResponse(response){
        var userData = jwt_decode(response.credential); //Token with the login user Data
        setUser(userData); //Store user Data 
        setIsLoggedIn(true)
        /* console.log(userData) */
        document.getElementById('signInDiv').hidden = true;
        
      }

    function handleSignOut(event) {
        setUser({}) //Empy the user Data
        document.getElementById('signInDiv').hidden = false;
    }  

    return(
        <LoginContext.Provider value={{user, handleCallbackResponse, handleSignOut}}>{children}</LoginContext.Provider>
    );
}

export default LoginContext

In my Login.js im using the context above with it functions and properties.

/*global google*/
import React, { useContext, useEffect } from 'react'
import LoginContext from '../LoginContext'; 

const Login = () => {

   const {user, handleCallbackResponse, handleSignOut} = useContext(LoginContext);   
      useEffect(()=>{
        google.accounts.id.initialize({
          client_id:"MY client ID",
          callback: handleCallbackResponse
        })
    
        google.accounts.id.prompt();
    
    
        window.google.accounts.id.renderButton(
          document.getElementById('signInDiv'),
          {theme: 'outline', size: 'medium'}
        )
    
      }, []);

  return (
    <div>
        <div id="signInDiv"></div>
      {
        //If user objetc is not empty show sign out button
        Object.keys(user).length !== 0 &&
      <button onClick={(e)=>handleSignOut(e)}>Sign Out</button>
      }
      {user && 
        <div>
          <img src={user.picture} alt="" />
          <h3>{user.name}</h3>
        </div>
      }
    </div>
  )
}

export default Login

As you can see im accessing to user prop or functions such as handleCallbackResponse that come from my LoginContext.js But now in my Dashboard.js im trying to use the user prop from LoginContex.js but is not rendering anything.

import React, { useContext } from 'react'
import Navbar from '../organisms/Navbar'
import './Dashboard.css'
import LoginContext from '../LoginContext'; 

const Dashboard = () => {

  const {user} = useContext(LoginContext) 
  console.log(user)

  return (
    <div className='dashboard'>
        <h2>{user.name}</h2>
        <Navbar/>
        <div className='content'>
            <h1>Welcome to my Dashboard</h1>
        </div>
    </div>
  )
}

export default Dashboard

In my h2 tag im trying to render the user.name but it doesn´t renders anything.

App.js:

import './App.css';
import { useContext } from 'react';
import Login from './atoms/Login';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import { LoginProvider } from './LoginContext';


function App() {

  

  return (
    <LoginProvider >
      <BrowserRouter>
      <Routes>
        <Route exact path="/dashboard" element={ /* isLoggedIn ?  */<Dashboard/> /* : <Login /> */}/>
        <Route  path="/" element={<Login /* setIsLoggedIn={setIsLoggedIn} *//>} />    
      </Routes>
      </BrowserRouter>
    </LoginProvider>
    
  );
}

export default App;

I did a console.log of user.name and i get undefined.