[BUG]: Multiple Element providers interfere with each other

[dscafati]

What happened?

• I have two versions of my checkout screen.
• I conditionally show one or the other. While one version is being shown, the other version is removed from the DOM

  if(condition){
  return <Elements options={options1}><CheckoutScreenVersion1/></Elements>
  }else{
  return <Elements options={options2}><CheckoutScreenVersion2/></Elements>
  }

• By default condition is true, so CheckoutScreenVersion1 is shown.
• When the condition changes, CheckoutScreenVersion2 becomes visible PaymentElements inside of CheckoutScreenVersion2 are rendered based on options1 instead of options2, even though that instance of the provider is no longer on the page, neither wrapping CheckoutScreenVersion2

What I expect to see is the PaymentElement inside of CheckoutScreenVersion2 rendered in the screen based on the configuration from options2

Environment

No response

Reproduction

No response

[dscafati]

Solved by keeping the two Elements mounted and just conditionally showing or hiding their contents

[brendanm-stripe]

It's likely that the switch is leading the new Elements to take over the old ones and inherit some options. Glad you got things working as needed! An alternative you can try is setting distinct key properties on each so React knows they are in fact different components when switching.