React v6-Redux Create PrivateRoutes

Im trying to create a PrivateRoutes in addition to the regular routes. After login, the page is successfully re-direct to /home, however when I tried to open /work, the page will go back to /home. all the data from state.valid is also shows "unidentified" in /work.

I figured it out that inside the privateRoutes it check if valid.isAuthenticated is true or not. However since. valid.isAuthenticated is set to false as initial value in reducer, everytime I open /home or /work, it re-render /login and then render /home or /work.

How do I fix to not to render /login before opening other pages?

Here is my PrivateRoutes.js

import React from "react";
import { useSelector } from "react-redux";
import { Navigate } from "react-router-dom";

const PrivateRoute = ({ children }) => {
  const valid = useSelector((state) => state.valid);
  return valid.isAuthenticated ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

here is my AppRouter.js

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";

import App from "../components/App";
import Login from "../components/Login";
import HomePage from "../components/HomePage";
import WorkPage from "../components/WorkPage";


const AppRouter = () => (
  <BrowserRouter>
    <div>
      <NavigationBar />
      <div>
        <Routes>
          <Route path="/" element={<App />} exact />
          <Route path="/login" element={<Login />} exact />
          <Route path="/home" element={<PrivateRoute><HomePage /></PrivateRoute>} />
          <Route path="/work" element={<PrivateRoute><WorkPage /></PrivateRoute>} />
        </Routes>
      </div>
    </div>
  </BrowserRouter>
);
export default AppRouter;

useEffect(() => {
    if (valid.isAuthenticated) {
      navigate("/home");
    } 
  },[valid.isAuthenticated]);