stripe in-flight error in reactjs when using Payment Request Button for wallets

I am getting the error after payment is successful using the Payment Request Button in Reactjs.

error: Uncaught (in promise) IntegrationError: You have an in-flight confirmCardPayment! Please be sure to disable your form submit button when confirmCardPayment is called.

code:

paymentRequest.on("paymentmethod", async (ev) => {
// Confirm the PaymentIntent without handling potential next actions (yet).
const {
  paymentIntent,
  error: confirmError,
} = await stripe.confirmCardPayment(
  key,
  { payment_method: ev.paymentMethod.id },
  { handleActions: false }
);

if (confirmError) {
  // Report to the browser that the payment failed, prompting it to
  // re-show the payment interface, or show an error message and close
  // the payment interface.
  ev.complete("fail");
} else {
  // Report to the browser that the confirmation was successful, prompting
  // it to close the browser payment method collection interface.
  ev.complete("success");
  // Check if the PaymentIntent requires any actions and if so let Stripe.js
  // handle the flow. If using an API version older than "2019-02-11" instead
  // instead check for: `paymentIntent.status === "requires_source_action"`.
  if (paymentIntent.status === "requires_action") {
    // Let Stripe.js handle the rest of the payment flow.
    const { error } = await stripe.confirmCardPayment(key);
    if (error) {
      // The payment failed -- ask your customer for a new payment method.
    } else {
      // The payment has succeeded.
    }
  } else {
    // The payment has succeeded.
  }
}

});

and component is simply: if (paymentRequest) { return <PaymentRequestButtonElement options={options} />; }

where did I mess up?