Mostrar u ocultar el componente si el usuario ha iniciado sesión en Reactjs

He configurado el registro y la página de inicio de sesión... con nodejs express jwt, y el token se guarda en las cookies. Mi objetivo es verificar si el usuario ha iniciado sesión y luego mostrar u ocultar el elemento en la barra de navegación. Hasta ahora esto es lo que vine con. Mi problema con esta solución es que tengo que actualizar el navegador porque tengo que hacer que las solicitudes de procesamiento condicional funcionen. Por favor ayuda.

function Navbar() {
 const [visible, setVisible] = useState(false);
 const navigate = useNavigate();
 const[isLoggedIn, setIsLoggedIn] = useState(false)
 useEffect(() => {
 checkLogin()
 }, []);
 const checkLogin = async () => {
 try {
 await axios.get('http://localhost:5000/token', {withCredentials: true});
 setIsLoggedIn(true)
 } catch (e) {
 setIsLoggedIn(false)
 console.log(e)
 }
 }
 const Logout = async () => {
 try {
 await axios.delete('http://localhost:5000/logout', {withCredentials: true});
 navigate("/");
 } catch (error) {
 console.log(error);
 }
 }
 const showDrawer = () => {
 setVisible(true);
 };
 const onClose = () => {
 setVisible(false);
 };
 return (
 <div className="menu">
 <Link to='/'>
 <div className="logo"/>
 </Link>
 {!isLoggedIn? (
 <Menu theme="dark" mode='horizontal' disabledOverflow='true'>
  <Menu.Item><Link to='/login'>Log In</Link></Menu.Item>
  <Menu.Item><Link to='signup'>Sign Up</Link></Menu.Item>
 </Menu>
 ): (
 <Button className='logout' onClick={Logout}>Log out</Button>
 )}
 <Button className="barsMenu" type="primary" onClick={visible? onClose: showDrawer}>
 <span className="barsBtn"/>
 </Button>
 <Drawer
 placement="bottom"
 closable={false}
 onClose={onClose}
 visible={visible}
 closeIcon
 >
 <Link to='/login'>
  <Button onClick={onClose}>Log in</Button>
 </Link>
 <Link to='/signup'>
  <Button onClick={onClose}>Sign up</Button>
 </Link>
 </Drawer>
 </div>
 )
}
export default Navbar

Solución del problema

Los estados de isAuth, token, etc. se pueden almacenar en cookies o en el almacenamiento local/de sesión, y la administración del estado se debe realizar con la API de contexto para que cuando se actualice la página, los estados no se pierdan.

const LoginContext = createContext({isAuth:false,token: "", 
   setAuth: () => {}})
const LoginProvider = ({child}) => {
 const [isAuth,setAuth] = useState(localStorage.getItem("isAuth") || false)
 const [token, setToken] = useState(localStorage.getItem("token"))
 useEffect(() => {
 localStorage.setItem("isAuth",isAuth)
 },[isAuth])
 return (
 <LoginContext.Provider value={{isAuth,token,setAuth}}>
 {child}
 </LoginContext.Provider>
 )
 }

Mientras inicia sesión

const {isAuth, setAuth}= useContext(LoginContext)
const login = async () => {
 var result = await axios.get('http://localhost:5000/token', {withCredentials: true});
 var { data} = result.data;
 setAuth(data!= null) //or conditional state
}
const logout = async () => {
 await axios.get('logout')
 setAuth(false) //or conditional state
}

Los niños de LoginContext pueden acceder a los valores de contexto

<LoginContextProvider>
 <Navbar />
</LoginContextProvider>

puede usar isAuth en la barra de navegación u otro componente

var {isAuth} = useContext(LoginContext)