How to create Private Routes using React Router v6 Outlet AND localStorage

Question

I've been away from coding, last time I've used React Router it was v5 yet. So, I'm working on a project and learned basics of V6 through some videos, learned about Outlet and wanted to use it. Now, I'm in another sprint of the project developing the login/logoff feats so now I need to protect some of those pages cause only logged users should access them 4 (Account/History/Deposit/Withdrawal). I've watched some videos but nothing could help me, is there somebody to give me the light? Code below.

index.js

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "account",
        element: <Account />,
      },
      {
        path: "history",
        element: <History />,
      },
      {
        path: "deposit",
        element: <Deposit />,
      },
      {
        path: "withdrawal",
        element: <Withdrawal />,
      },
    ],
  },
]);

App.js

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Header />
        <Outlet />
      </div>
    </Provider>
  );
}