How to do private routes with react-router-dom latest version 6.4

Question

I want to protect View Stock and add stock component if user is not loggedin.

imports

import {createBrowserRouter,createRoutesFromElements,RouterProvider,Route, Navigate
} from "react-router-dom";

RootLayout

const RootLayout= () => {
  return <Outlet/>
  );
};

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<RootLayout />}>
        <Route path="/view-stock" element={<ViewStock />} />
        <Route path="/view-stock" element={<AddStock />} />
       <Route path="/signup" element={<Signup />} />
      <Route path="/signin" element={<Signin />} />
    </Route>
  )
);

App.tsx

const App = () => {
  return (
    <UserContextProvider>
      <RouterProvider router={router} />
    </UserContextProvider>
  );
};
export default App;