[BUG]: Failed to render <PayPalHostedFieldsProvider /> component.

[mariana-berkii]

Is there an existing issue for this?

• I have searched the existing issues.

🐞 Describe the Bug

When the Hosted Fields component rerenders due to state changes, an error appears:
Failed to render component. BraintreeError: Element already contains a Braintree iframe.
As I understand this happens because the PayPalHostedFieldsProvider component has been initiated and when rerender happens, the PayPalHostedFieldsProvider component doesn't check if the hosted fields instance exists, it just tries to render the card fields again, which throws an error.

😕 Current Behavior

On rerenderings Hosted Fields fail with the error:

react-paypal-js.js:1237 Uncaught Error: Failed to render <PayPalHostedFieldsProvider /> component. BraintreeError: Element already contains a Braintree iframe.
    at react-paypal-js.js:1237:15
    at basicStateReducer (react-dom.development.js:16540:41)
    at updateReducer (react-dom.development.js:16664:22)
    at updateState (react-dom.development.js:17004:10)
    at Object.useState (react-dom.development.js:17915:16)
    at useState (react.development.js:1622:21)
    at PayPalHostedFieldsProvider (react-paypal-js.js:1188:20)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at beginWork (react-dom.development.js:21601:16)

🤔 Expected Behavior

When the checkout page rerenders due to state changes (e.g. changes to basket), it would be good if in such cases the PayPal Hosted Fields component would not try to render Hosted Fields once again, but use the existing instance.

🔬 Minimal Reproduction

No response

🌍 Environment

| Software         |            Version(s)           |
| ---------------- | ------------------------------- |
| react-paypal-js  |              8.1.3              |
| Browser          |   Google Chrome 124.0.6367.60   |
| Operating System |   Windows 10 Enterprise 64-bit  |

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

➕ Anything else?

No response