FireBase Auth issue on first attempt

i tried to add auth service from firebase to my react app. i add signIn method from fireBase but i have an issue .. when i try to log into account, the first attempt dosen't work. I set auth state (true or false) on useContext, when loggin is ok auth is set to true and when auth fail auth keep false state. I use this state in private nested route validation:

here is the route validation :

<div className="App">
  <Routes>
    <Route path="/" element={<HomeLoginPage />} />
    **<Route path="/LoggedOrder" element={<Private />}>
      <Route
        path="/LoggedOrder/Order/*"
        element={<PrivateRouteWrapper />}
      />
    </Route>**
  </Routes>
</div>

here is the signIn function :

const signIn = (e) => {
    signInWithEmailAndPassword(
      auth,
      emailRef.current.value,
      passWordRef.current.value
    )
      .then((userCredential) => {
        setIsAuth(true);
        const user = userCredential.user;
        setErrorMsg('loggin correct ! ');
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        setIsAuth(false);
        if (errorCode === 'auth/invalid-email') {
          setErrorMsg('error you must add logs');
        }
        // ..
      });
  };

here is the private route validation condition:

export default function Private() {
  const { isAuth } = useContext(UserContext);
  console.log(isAuth);
  if (isAuth === false) {
    return <Navigate to="/" />;
  }
  return (
    <div className="container">
      <Outlet />
    </div>
  );
}

here is the context component :

export function UserContextProvider(props) {
  const [isAuth, setIsAuth] = useState(false);

  return (
    <UserContext.Provider value={{ setIsAuth, isAuth }}>
      {props.children}
    </UserContext.Provider>
  );
}

and this is a video of my issue : click here to watch issue in live situation

Thanks for help :)