At first, you cannot get any information about the session.

[cupid20103]

This is my client component code.

"use client";

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

import { BillingDataTable } from "./billing-table";
import { billingColumns } from "./billing-column";

export default function BillingDashboard() {
  const [transactions, setTransactions] = useState([]);

  const { data: session, status } = useSession();

  useEffect(() => {
    if (status === "authenticated" && session?.user?.email) {
      const fetchTransactions = async () => {
        const response = await fetch("/api/stripe", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email: session.user?.email }),
        });

        const result = await response.json();
        setTransactions(result.transactions);
      };

      fetchTransactions();
    }
  }, [session, status]);

  return <BillingDataTable columns={billingColumns} data={transactions} />;
}

After logging in and navigating to this page, session.user.email cannot be retrieved.
But when I refresh the page, the correct email information appears. What could be the problem?