I am developing an application based on nextJS and integrating stripe's web elements (cards), but these elements are not displayed. I saw on inspection that it was empty. They work fine in my other reactJS apps, but not here, even though the code is the same. What did i do wrong?

import { Elements } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; async function loadStripePromise(){ const stripePromise = await loadStripe('PUBLISHABLE_KEY'); return stripePromise; } const AddStripeCreditCard: React.FC = ({ show, close, }) => { return (      ); };

import { useElements, useStripe } from '@stripe/react-stripe-js'; import { CardNumberElement, CardCvcElement, CardExpiryElement, CardElement } from "@stripe/react-stripe-js"; const CardDetailsForm = () => { return ( 
  卡号    有效期    CVC    支付  
 ); };

The card element is not displayed, I also tried cardElement.