We could not retrieve data from the specified Element.

[UndercoverNL]

What happened?

So I am having a complicated issue running a CardElement with a loader. As there is no indication of the Element form being submitted by default, I am trying to use a simple loader useState which will indicate the form being submitted and ensure it won't be submitted multiple times by the user.

However, as setLoading(true) causes a re-render it errors the following in the console:

This is probably due to stripe being loaded multiple times. As when I remove the setLoading(true) all works, but without loader.

const submit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    clearFlashes('account:payment-methods:create');
    setLoading(true);

    if (elements == null || stripe == null) {
        return;
    }

    const { error, paymentMethod } = await stripe.createPaymentMethod({
        type: 'card',
        card: elements.getElement(CardElement),
    });

    if (error) return clearAndAddHttpError({ key: 'account:payment-methods:create', error });

....
};

this is my current code. The setLoading state is declared as: const [ loading, setLoading ] = useState(false);

Is there any way to set an useState or any other kind as loader for the CardElement form?

Environment

Version 1.44.112 Chromium: 106.0.5249.119 (Official Build) (64-bit) Windows 10

Reproduction

No response