CreditCard not unmounting cleanly

[bpitman]

Describe the bug

I have a multi-stage checkout - one page with react stages. I get this error if I move from EnterCard to Confirmation too quickly.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in CreditCard (created by EnterCard) in div (created by ForwardRef(RenderPaymentForm)) in FormProvider (created by ForwardRef(RenderPaymentForm)) in ForwardRef(RenderPaymentForm) (created by EnterCard) in div (created by EnterCard) in div (created by EnterCard)

Your Example Website or App

Not public

Steps to Reproduce the Bug or Issue

Complicated, but hopefully the info in the error will help you understand what might be causing the issue in CreditCard. I'll work on an example if it's not obvious.

Expected behavior

No console error.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Firefox

Additional context

Note that I have 2 options after getting the nonce:

1. Use the nonce and go straight to Confirmation. I see this error in console.
2. Use the nonce to store the card associated with a customer, then go to Confirmation. I do not see this error, so I assume it's a race condition, or maybe the async nature of card storage allows CreditCard to complete cleanly.