[Bug]: route not rerendering after navigating through link

[Kainar01]

What version of React Router are you using?

6.8

Steps to Reproduce

So, my setup is like this:

export function AppRoutes() {
  return (
    <BrowserRouter basename={import.meta.env.VITE_PUBLIC_URL}>
      <Routes>
        <Route path="*" element={<MiscRoutes />} />
        <Route
          element={(
            <ProtectedRoute>
              <DashboardLayout />
            </ProtectedRoute>
          )}
        >
          <Route path="/tickets/*" element={<TicketsRoutes />} />
          <Route path="/user/*" element={<UserRoutes />} />
        </Route>

        <Route path="*" element={<Page404 />} key="404" />
      </Routes>
    </BrowserRouter>
  );
}

And user routes is like so:

export function UserRoutes() {
  return (
    <Routes>
      <Route
        path="profile"
        element={(
          <ProfileLayout>
            <ProfilePage />
          </ProfileLayout>
        )}
        key="profile"
      />
      <Route path="profile/edit" element={<ProfileLayout editLayout />} key="profile-edit">
        <Route path="details" element={<ProfileDetailsEditPage />} />
        <Route path="password" element={<ProfilePasswordEditPage />} />
        <Route path="role" element={<ProfileRoleEditPage />} />
      </Route>
    </Routes>
  );
}

And I have a protected route which is like so:

export function ProtectedRoute({
  redirectPath = PATH_AUTH.login,
  children,
}: Props) {
  const { isLoggedIn } = useAuth();

  if (!isLoggedIn) {
    return <Navigate to={redirectPath} replace />;
  }

  return children || <Outlet />;
}

Protected route supposed to get isLoggedIn from redux slice

export const useAuth = () => {
  const [signout] = authApi.endpoints.signout.useMutation();
  const { isLoggedIn, user } = useAppSelector((state) => state.authSlice);

  const logoutUser = async () => {
    await signout();
    // redux dispatch not updating components
    window.location.reload();
  };
  return { isLoggedIn, user, logout: logoutUser };
};

Now, the thing is, when I initially logged in and try to logout, it works fine. Protected route gets state update from redux slice and navigates user to redirectPath.

But when I click any react router link and try to logout after that, protected route does not rerender. It just stays on the same page, despite the fact that state got updated. I have to explicitly reload the page for it to work.

Also, when I do not split routes into multiple files and keep everything in one file, everything functions well.

Anyone has idea why it works like this?

Expected Behavior

Proctected route has to rerender and get update from redux.

Actual Behavior

Protected route does not rerender, but redux state is updated. It sees update only after refreshing page