How to run two useEffect at a different time

Question

Hey, I am learning react but i got a problem with use useEffect hook

I am creating a full authenticated TODO WEB APP where user can login in and add todo here is my app component code

APP COMPONENT

const [protect, setProtect] = useState(false);

  // FOR PROTECTED ROUTES

  const { userData, setUserData } = UserFun();

  useEffect(() => {
    if (userData) {
      setProtect(true);
    }
  }, [userData]);

  return (
    <ShowModel.Provider value={{ show, setShow }}>
      <Routes>
        <Route path="/" element={<Register />} />
        <Route path="Login" element={<Login />} />
        <Route
          path="Todo"
          element={
            <Protected_route user={protect}>
              <Todo />
            </Protected_route>
          }
        />
      </Routes>
    </ShowModel.Provider>
  );

basically i am protecting a todo route but i come across an issue when i login my protect route component here

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function Protected_route({ children, user }) {
  const navigated = useNavigate();
  useEffect(() => {
    if (!user) {
      return navigated("/Login");
    }
  }, [user, navigated]);
  return children;
}

gives userinfo and toggle setProtect to true value but when i refresh page it redirect me to login and set setProtect to false when i debug the code setProtect is false

How to set setProtect to true until useDate is present

Thank you in advance