I’m using react-stripe-js and getting an IntegrationError: You cannot have multiple Embedded Checkout objects. This error occurs when trying to render the form more than once.

I think I need to destroy the checkout form somehow before creating a new instance, but I can’t find how to do this within react-stripe-js.

Someone recommended using a different key for the EmbeddedCheckoutProvider, but that didn’t resolve the issue.

<div id="checkout">
  <EmbeddedCheckoutProvider stripe={stripePromise}>
      <EmbeddedCheckout />
    </EmbeddedCheckoutProvider>
  </div>