How to redirect unauthenticated user from protected page?

Private routes are protected however they appear as blank page. Instead let’s redirect users from those pages, if they are not logged in.

// components/routes/RedirectRoute.js
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function RedirectRoute() {
  const [count, setCount] = useState(3);
  const navigate = useNavigate();

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((currentCount) => --currentCount);
    }, 1000);
    // redirect once count is equal to 0
    count === 0 && navigate("/");
    // cleanup
    return () => clearInterval(interval);
  }, [count]);

  return (
    <div
      className="d-flex justify-content-center align-items-center vh-100"
      style={{ marginTop: "-7%" }}
    >
      <h2>Please login. Redirecting in {count} second.</h2>
    </div>
  );
}

Now use in PrivateRoute.js

return ok ? <Outlet /> : <RedirectRoute />;