title: Uncaught IntegrationError: Can only create one Element of type card (Stripe)
body: <p>I am getting the error &quot;Uncaught IntegrationError: Can only create one Element of type card.&quot; I set the Elements provider in the root component. I read this article <a href="https://stackoverflow.com/questions/63640839/only-one-element-of-type-cardnumber-can-be-created">Only one element of type cardNumber can be created</a> in which I think has the similar problem with mine, but we are using a little different syntax, if we are having the same problem then how can I integrate useEffect in my case?</p>
  <p>This is my root component:</p>
  <pre><code>import { Elements } from '@stripe/react-stripe-js';
  import { loadStripe } from '@stripe/stripe-js';
  
  const stripePromise = loadStripe(process.env.PUBLISHABLE_KEY);
  
  function MyApp({ Component, pageProps }) {
    return (
          &lt;Elements stripe={stripePromise}&gt;
              &lt;Component {...pageProps} /&gt;
          &lt;/Elements&gt;
    );
  }
  
  export default MyApp;
  </code></pre>
  <p>This is my stripe page (where the card component is rendered).</p>
  <pre><code>import { CardElement } from '@stripe/react-stripe-js';
  
  const Buy = () =&gt; {
  
    return (
      &lt;div className={styles.container}&gt;
        &lt;div style={{ width: ' 70%' }}&gt;
          &lt;CardElement /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Buy;
  </code></pre>