router.refresh is not working in first load

"use client";

import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useEffect, useState, useTransition } from "react";

export default function useUpdateRole() {
  const { update } = useSession();
  const router = useRouter();
  const [firstTime, setFirstTime] = useState(false);
  const [isPending, startTransition] = useTransition();
  function RefreshThePage() {
    startTransition(() => {
      router.refresh();
    });
  }
  async function UpdateAndRefresh() {
    await update();
    RefreshThePage();
  }
  useEffect(() => {
    if (!firstTime) {
        UpdateAndRefresh();
        setFirstTime(true);
    }
    const interval = setInterval(UpdateAndRefresh, 1000 * 60 * 60);
    return () => clearInterval(interval);
  }, [update]);
  useEffect(() => {
    const visibilityHandler = async () =>
      document.visibilityState === "visible" && UpdateAndRefresh();
    window.addEventListener("visibilitychange", visibilityHandler, false);
    return () =>
      window.removeEventListener("visibilitychange", visibilityHandler, false);
  }, [update]);

  return null;
}