how to make a private route with Supabase and React?

Question

I am doing a login with supabase and I react, I already have a large part, I just need to make a private route, I have a page to register, another to start the session and finally a success page that is displayed when the user registers or starts the session correctly and i need this to be private that can only be accessed when the user is logged in, but i have not been able to do this part, i want to avoid making use of the react context, most of the answers i have found use the context but i want to know if it exists a way not to use it

import { Navigate } from "react-router-dom";
import { supabase } from "../supabase/client";
import { useState } from "react";

const PrivateRoute = ({ component: Component }) => {
  const [auth, setAuth] = useState(true);

  async function signOutUser() {
    await supabase.auth.signOut();
    setAuth(false);
    return auth;
  }

  //if it is true it will show the success page, if it is false it will return us to home
  return signOutUser ? <Component /> : <Navigate to="/" />;
};

export default PrivateRoute;