I'm trying to create protected routes using latest react-router-dom v6.11 through createBrowserRouter. But it's not working. Some help please

Question

import "./App.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ConfessionsPage from "./pages/ConfessionsPage";
import HelpPage from "./pages/HelpPage";
import { useContext, useState, useEffect } from "react";
import { VentifyContext } from "./context/VentifyContextProvider";

function App() {
  const publicRoutes = [
    {
      path: "/",
      element: <HomePage />,
    },
    {
      path: "/help",
      element: <HelpPage />,
    },
  ];

  const protectedRoutes = [
    ...publicRoutes,
    {
      path: "/confessions",
      element: <ConfessionsPage />,
    },
  ];

  const { userIsLoggedIn } = useContext(VentifyContext);

  const publicRouter = createBrowserRouter(publicRoutes);
  const protectedRouter = createBrowserRouter(protectedRoutes);

  const [router, setRouter] = useState(publicRouter);

  useEffect(() => {
    setRouter(userIsLoggedIn ? protectedRouter : publicRouter);
  }, [userIsLoggedIn]);

  return <RouterProvider router={router} />;
}

export default App;

it's not able to find protected routes when user logged in and userIsloggedIn value changes to true. ii'm using useEffect hook so that it render the logic again but still protected routes are not accessible.