How to make useEffect() in AuthProvider runs first then call useContext()

I was using React for my project, but I have a problem about getting user session. Every components that inside the provider can call from here. When the browser start loading up the page, the user state is always null until axios is getting user session done in useEffect(). How can I control the AuthProvider that useEffect() must be called first, then the user state can be usable in any children components.

Here is my Auth Context implementation.

import axios from "axios";
import { createContext, useContext, useEffect, useState } from "react"

// Create context to make a context reference.
const authContext = createContext()

// Provider component that warp your app and make auth object
// available to any child component that calls useAuth() 
export function AuthProvider({children}) {

  const [user,setUser] = useState(null)
  const URL_API = "http://localhost:5000/auth"

  useEffect(()=>{
    axios.get(URL_API + "/login")
    .then((response)=>{
      if (response.data.loggedIn === true) {
        setUser(response.data.user)
      }
      else {
        setUser(null)
      }
      console.log(response.data.user)
    })
  },[])

  const login = async (email,password) => {
    const response = await axios.post(URL_API + "/login", { email, password });
    if (response.data.err) {
      throw response.data.err
    }
    if (response.data.loggedIn === true) {
      setUser(response.data.user);
    }
    else {
      setUser(null);
    }
    return response.data.user;
  }

  const register = async (firstname,lastname,email,password) => {
    const response = await axios.post(URL_API + "/register", { firstname, lastname, email, password });
    if (response.data.err) {
      throw response.data.err
    }
    if (response.data.loggedIn === true) {
      setUser(response.data.user);
    }
    else {
      setUser(null);
    }
    return response.data.user;
  }

  const logout = async () => {
    const response = await axios.get(URL_API + "/logout");
    if (response.data.err) {
      throw response.data.err
    }
    if (response.data.loggedIn === true) {
      console.log("Something went wrong!");
    }
    setUser(null);
  }

  return (
    <authContext.Provider value={{user,login,register,logout}}>
      {children}
    </authContext.Provider>
  )
}

// Hook for child components to get the auth object
// and re-render when it changes.
export const useAuth = () => { 
  return useContext(authContext) 
}

I called the useAuth() in PublicRoute for routing if auth.user has an object but get undefined because auth.user is null.

import { Navigate, Outlet, useLocation } from "react-router-dom"
import { useAuth } from "../Contexts/Auth"

function PublicRoute({firstPath = "/login",redirectPath = "/home",children}) {
  const auth = useAuth()
  const location = useLocation()
  return ( auth.user ? <Navigate to={redirectPath}/> : location.pathname === "/" ? <Navigate to={firstPath}/> : children ? children : <Outlet/> )
}

export default PublicRoute

I’m using AuthProvider to covers every React Router DOM Elements to make sure that every routes can use context.

Here is my App.js for control AuthProvider with React Router.

import './App.css';
import axios from 'axios';
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from "react-router-dom"
import Navigator from './Components/Navigator';
import Header from './Components/Header';
import Home from './Page/Home';
import Dashboard from './Page/Dashboard';
import NotFound from './Page/NotFound';
import Login from "./Page/Login"
import Logout from './Page/Logout';
import Register from "./Page/Register"
import ForgotPassword from './Page/ForgotPassword';
import PublicRoute from './Routes/PublicRoute';
import ProtectedRoute from './Routes/ProtectedRoute';
import { SnackbarProvider } from "notistack"
import { AuthProvider } from './Contexts/Auth';

function App() {

  axios.defaults.withCredentials = true

  return (
    <SnackbarProvider maxSnack={3}>
      <AuthProvider>
        <Router>
          <Routes>

            <Route path="/" element={<PublicRoute/>}>
              <Route element={<><Header/><Outlet/></>}>
                <Route path="/register" element={<Register/>}/>
                <Route path='/forgot_password' element={<ForgotPassword/>}/>
              </Route>
            </Route>

            <Route element={<ProtectedRoute roles={["user","admin"]}/>}>
              <Route element={<><Navigator/><Outlet/></>}>
                <Route path="/home" index element={<Home/>}/>
                <Route path="/dashboard" element={<Dashboard/>}/>
                <Route path="/logout" element={<Logout/>}/>
              </Route>
            </Route>

            <Route path="/login" element={<Login/>}/>
            <Route path="*" element={<Navigate to="404"/>}/>
            <Route path="/404" element={<NotFound/>}/>

          </Routes>
        </Router>
      </AuthProvider>
    </SnackbarProvider>
  );
}

export default App;

Here is console log in the browser that PublicRoute is useAuth() before the useEffect() called