Проблема защищенного маршрута React Router v6.10

Я пытаюсь создать что-то с реакцией, у которой есть защищенные маршруты.

Мой файл main.jsx:

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";

import store from "./app/store";
import { Provider } from "react-redux";

import Root from "./components/Root";
import PublicLayout from "./components/PublicLayout";
import PersistLogin from "./components/PersistLogin";
import RequireAuthLayout from "./components/RequireAuthLayout";
import { ErrorPage, Home, Login, Logout, Register } from "./pages";

const router = createBrowserRouter([
{
path: "/*",
element: <Root />,
errorElement: <ErrorPage />,
children: [
  {
    element: <PublicLayout />,
    children: [
      { path: "login", element: <Login /> },
      { path: "register", element: <Register /> },
    ],
  },
  {
    element: <PersistLogin />,
    children: [
      {
        element: <RequireAuthLayout />,
        children: [
          { path: "home", element: <Home /> },
          { path: "logout", element: <Logout /> },
        ],
      },
    ],
  },
],
  },
]);


ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store = {store}>
      <RouterProvider router = {router} />
    </Provider>
  </React.StrictMode>
);

Корень.jsx:

import React from "react";
import { Outlet } from "react-router-dom";
import Header from "./Header";

const Root = () => {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
    </>
  );
};

export default Root;

RequireAuthLayout.jsx:

import React from "react";
import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectCurrentToken } from ".././features/auth/authSlice";

const RequireAuthLayout = () => {
  const token = useSelector(selectCurrentToken);
  const location = useLocation();

  return token ? (
    <Outlet />
  ) : (
    <Navigate to = {"/login"} state = {{ from: location }} replace />
  );
};

export default RequireAuthLayout;

PersistLogin.jsx:

import React, { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useRefreshMutation } from "../features/api/authApiSlice";
import { selectCurrentToken, setCredentials } from "../features/auth/authSlice";
import Loading from "../components/Loading";

const PersistLogin = () => {
  const [refresh, { isLoading, isError }] = useRefreshMutation();
  const dispatch = useDispatch();

  const token = useSelector(selectCurrentToken);

  let content;

  useEffect(() => {
    const getAccessToken = async () => {
      try {
        const result = await refresh();
        dispatch(setCredentials(result.data));
      } catch (error) {
        // console.info(error);
      }
    };
    !token && getAccessToken();
  }, []);

  if (isLoading) {
    content = <Loading />;
  } else if (isError) {
    content = <p>Bir hata oluştu, tekrar giriş yapınız!</p>;
  } else {
    <Outlet />;
  }

  return content;
};

export default PersistLogin;

PersistLogin просто отправляет запрос на конечную точку, чтобы проверить, есть ли файл cookie. Если он есть и действителен, он устанавливает токен в хранилище избыточности. Но, к сожалению, защищенные маршруты не отображаются. Я имею в виду, что нет никакой ошибки и чего-то еще, но они не рендерятся. Токен в порядке и все, но все еще ..

Пожалуйста, помогите мне..