i have cookie based authentication so i need call api to check for authentication on each page load.also i am using redux to maintain a global auth state like below

const initialState = {
  user: {},
  isLoading: false,
  error: null,
  isTeacher: false,
  isModerator: false,
  isStudent: false,
};

on each refresh inside of useeffect of app page

const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: "GET_USER" });
  }, []);

this is giving me error. i want to initialize the state on login before the page renders.

const isAuthenticated =
    select.isTeacher || select.isStudent || select.isModerator;
 <Router>
      <div>
        <Routes>
          <Route
            path="/"
            element={!isAuthenticated ? <Landing /> : <Navigate to="/" />}
          />
          <Route
            path="/home"
            element={isAuthenticated ? <Home /> : <Navigate to="/" />}
          ></Route>
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </Router>

the dispatch call inside of useeffect is giving me error like i cannot use a hook inside of another hook.