Which hook is more suitable for authorization verification?

I'm wondering how the method will be the most correct from the point of view of logic. I want to check authorization for rendering components , but now useEffect only works there when the page is first rendered or restarted , because it has a dependency [ ] . Which implementation will be the most loconic, and most importantly correct from the point of view of hooks, so that the user receives components after authorization without restarting.

I have function auth :

 import { useEffect, useState } from "react"

export function useCheckCookieToken() {
  const [session, setSession] = useState()
  const [loading, setLoading] = useState(true)
  const [name,setName]=useState('')
  const [role,setRole]=useState('')

  useEffect(() => {
    let cancel = false
    async function sessionPost() {
      const res = await fetch(`/api/checkCookie`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        },
      })
      if (res.ok) {
        const result = await res.json()
        if (!cancel) {
          setSession(result)
          setName(result.user.name)
          setRole(result.user.role)
          setLoading(false)
        }
      } else {
        setLoading(false)
      }
    }
    sessionPost()
    return () => {
      cancel = true
    }
  }, [])

  //  console.log(session.user.name)
  return { session, loading , role ,name}
}

My comp:

const [authenticated, setAuthenticated] = useState(false); 

const { session, loading, name } = useCheckCookieToken();

  useEffect(() => {
    if (session) {
      setNameUser(name);
      setAuthenticated(true);
    } else {
      setAuthenticated(false);
    }
  }, [session]);

  return (
    <>
      {
        loading ? (
          <div><CircularProgress/></div> 
        ) : session ? (
          <>
            <Auth />
            />
          </>
        ) : (
          <>
           <NotAuth />
          </>
        )
      }
    </>
  )

> AFTER ADD useContext

Now i add authProvider.js with useContext :

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();


export function useAuth() {
    return useContext(AuthContext);
}

export function AuthProvider({ children }) {
    const [authenticated, setAuthenticated] = useState(false);
    const [session, setSession] = useState(null)
    const [loading, setLoading] = useState(true)
    const [name, setName] = useState('')
    const [role, setRole] = useState('')

    const login = async () => {
        try {
            const res = await fetch(`/api/checkCookie`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            });
            if (res.ok) {
                const result = await res.json();
                setSession(result);
                setName(result.user.name);
                setRole(result.user.role);
                setLoading(false);
                setAuthenticated(true);
            } else {
                setLoading(false);
                setAuthenticated(false);
            }
        } catch (error) {
            console.error(error);
            setLoading(false);
            setAuthenticated(false);
        }
    };

    const logout = async () => {
        try {
            const res = await fetch('/api/logout', {
                method: 'GET',
                headers: {
                    'Authorization': 'bearer ' + localStorage.getItem('sid'),
                    'Content-Type': 'application/json'
                }
            });
            if (res.ok) {
                setAuthenticated(false);
                console.log("Success logout");
            } else {
                console.error("Failed to logout");
            }
        } catch (error) {
            console.error(error);
        }
    };


    const authContextValue = {
        authenticated,
        login,
        logout,
    };

    return (
        <AuthContext.Provider value={authContextValue}>{children}</AuthContext.Provider>
    );
}   

And i have error :

Cannot destructure property 'authenticated' of '(0 , _services_authProvider__WEBPACK_IMPORTED_MODULE_14__.useAuth)(...)' as it is undefined.
TypeError: Cannot destructure property 'authenticated' of '(0 , _services_authProvider__WEBPACK_IMPORTED_MODULE_14__.useAuth)(...)' as it is undefined.

Updating comp after useContext:

function MainPage() {
  const { authenticated, login, logout } = useAuth();

 useEffect(() => {
    if (authenticated) {
      setNameUser(name);
    } else {
      setNameUser('');
    }
  }, [authenticated]);

return (
    <>
      <AuthProvider.Provider value={{name}}>
        {
          loading ? (
            <div><CircularProgress /></div> 
          ) : session ? (
            <>
            <h1>{name}</h1>
             
            </>
          ) : (
            <>
              <Bar/>
            </>
          )
        }
      </AuthProvider.Provider>
    </>
  )
}

the best way is to use useContext Hook. u need to access the users state globally.

you can see how to implement this from link below:
enter link description here