How to protect route in react router dom version 6.14 using createBrowserRouter

Question

In this code

import React from "react";
import { createBrowserRouter, RouterProvider, r } from "react-router-dom";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";
import { action as signup } from "./pages/signup/Signup";
import { useAuthConetxt } from "./hooks/useAuthConetxt";
import { createPortal } from "react-dom";
import classes from "./App.module.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "login",
        element: <Login />,
      },
      { path: "signup", element: <Signup />, action: signup },
    ],
  },
]);

function App() {
  const { authIsReady, user } = useAuthConetxt();
  return (
    <>
      {!authIsReady &&
        createPortal(
          <div
            style={{
              width: "100vw",
              height: "100vh",
              backgroundColor: "rgba(0,0,0,0.3)",
              position: "absolute",
              zIndex: "1",
            }}
          >
            <span className={classes.loader}></span>
          </div>,
          document.getElementById("backdrop")
        )}
      <RouterProvider router={router} />
    </>
  );
}

export default App;

I want to protect Home with path '/' such that if I'm not logged in, it redirects to '/login'.

Home.js

import React from "react";
import classes from "./Home.module.css";
import { Outlet } from "react-router-dom";
import MainNavigation from "../../components/header/MainNavigation";

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

export default Home;

In previous versions we can say

<Route exact path="/">
   {user && <Home/>}
   {!user && <Redirect to="/login" /> 
</Route>

I can check in every component if user exists or not, but I think it's a bad approach. So, in React Router DOM version 6.4, how can I do the same thing using conditional? I know I can use loaders, but the user is inside context, I can't use hooks inside loaders.