My user variable is defined after the component mounts after signing up or logging in but when navigating to another page it is null. I have this as the AuthContext component after the user signs in.

  useEffect(() => {      
            const unsubscribe = auth.onAuthStateChanged(user=>{          
                setCurrentUser(user);              
            })
            {console.log(currentUser)}
            return unsubscribe
        })
 const value = {
        signup,
        currentUser,
        logout,
        authError,
        login
    }
    return(
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )

This is my App.js Component.

function App() {
  return (
    <Router>
    <div className = "App">
    <AuthProvider>
    
    <Routes>
   
        <Route path="/" element={<Home/>}/>
        <Route element= {<AuthRoute/>}>
          {/* 
          If user is already signed in re-direct to home
          */}
        <Route exact path = "/sign_up" element = {<SignUp/>} />  
        <Route exact path = "/login" element= {<SignIn/>}/>
        </Route>
        <Route exact path="/new_post" element ={<AuthRouteIfLoggedOut>
          <SignUp/>
        </AuthRouteIfLoggedOut>}/>
   
        
        <Route exact path="/about" element={<About/>}/>
    
        
       
    </Routes> 
    </AuthProvider>
    </div>
    </Router>
  );

}

AuthContext is my context component.

Any reason why when I try to navigate to another page the user is undefined or is "signed-out" on that page only? But when I navigate back to my main page it is logged in and works properly. Any reason why when navigating to different pages currentUser is null?