[BUG]: Typescript error with confirmPayment

[ellieb]

What happened?

I am running into a typing issue when I am trying to confirm the payment intent when using the payment element. I am mostly following the docs here: https://stripe.com/docs/stripe-js/react#useelements-hook and I get a type error on the elements instance:

No overload matches this call.
  Overload 1 of 2, '(options: { elements: StripeElements; confirmParams?: Partial<ConfirmPaymentData>; redirect: "if_required"; }): Promise<PaymentIntentResult>', gave the following error.
    Type 'StripeElements' is missing the following properties from type 'StripeElements': update, fetchUpdates, create ts(2769)

stripe.d.ts(59, 5): The expected type comes from property 'elements' which is declared here on type '{ elements: StripeElements; confirmParams?: Partial<ConfirmPaymentData>; redirect: "if_required"; }'`

The sample code is this (in a .tsx file):

import { useElements, useStripe } from "@stripe/react-stripe-js";

const stripe = useStripe();
const elements = useElements();

if (!stripe || !elements) {
  return;
}

const result = await stripe.confirmPayment({
  elements,
  confirmParams: {
    return_url: window.location.href
  },
  redirect: "if_required"
});
};

Looks like the useElements hook returns a different elements object type that what stripe.confirmPayment is expecting, despite following the docs. The code works as expected but just throws ts errors.

Is this a known issue? And anything to be done on my side (other than adding a @ts-ignore?).

Environment

@stripe/react-stripe-js: ^1.9.0,@stripe/stripe-js: ^1.32.0, react: 17.0.2, apiVersion: '2020-08-27'

Reproduction

No response