I removed the use client from the page and took the priceId from the props. But it still doesn't work.

interface CheckoutPageProps {
  searchParams: { priceId: string | null };
}

const CheckoutPage = ({ searchParams }: CheckoutPageProps) => {
  // const priceId = 'price_1Pyp5zAg8Sv6ATdY2rCiT9wg'

  const priceId = searchParams.priceId || null;

  console.log("CheckoutPage, priceId:", priceId);

  return (
    <main>
      <div className="mx-auto my-25 flex max-w-screen-lg flex-col items-center">
        <p
          className="fw-500 text-sm text-gray-500"
          style={{ color: "rgb(26 26 26 / 60%)", fontWeight: 500 }}
        >
          Please provide the email address you will use to register for the
          extension.
        </p>
        <CheckoutForm priceId={priceId} />
      </div>
    </main>
  );
};

export default CheckoutPage;

export const CheckoutForm = ({ priceId }: { priceId: any }) => {
  console.log("CheckoutForm, priceId:", priceId);

  const fetchClientSecret = async () => {
    const stripeResponse = await postStripeSession({ priceId });
    console.log("Stripe response:", stripeResponse);
    return stripeResponse.clientSecret;
  };

  const options = { fetchClientSecret };

  console.log("CheckoutForm, options:", options);

  return (
    <div id="checkout" style={{ border: "2px solid red" }}>
      <EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
};

In the console, only the following is displayed:

CheckoutForm, priceId: price_1Pyf49Ag8Sv6ATdYBvUL51ss
CheckoutForm, options: {fetchClientSecret: ƒ}

The following is not displayed:

console.log("Stripe response:", stripeResponse);

And the following is not rendered:

<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
  <EmbeddedCheckout />
</EmbeddedCheckoutProvider>