Protected routes in react-router dom latest version 6.4

Question

I want redirect user to signin page, if the user is accessing protected routes from url in react-router-dom latest version 6.4, And bill is the protected route

Rootlayout

const RootLayout = () => {
  return (
    <div className="flex flex-col h-screen bg-gray-200">
      <Navbar open={open} setOpen={setOpen} />

      <div className="flex flex-1 overflow-hidden">
    
        <div className="sm:w-[0%] md:w-[8%]">
          <Sidebar />
        </div>

        <div className="flex flex-1 overflow-y-auto p-10">        
          <Outlet />
        </div>
      </div>
    </div>
  );
};

routes

const router = createBrowserRouter(
  createRoutesFromElements(
    <>
        <Route element={<RootLayout />}>
          <Route path="/bills" element={<bills/>} />
       </Route>
      <Route path="/signin" element={<Signin />} />
    </>
  )
);

app component

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