iframe element not removed when component is unmounted, resulting in duplicate iframes

[spradlin-dev]

react-google-recaptcha version: 3.1.0
react-async-script version: 1.2.0

Our recaptcha is being mounted inside of a modal, but when the modal is closed (and unmounted) the iframe that was created by react-google-recaptcha does not get cleaned up. This means that if the user opens and closes the modal multiple times, we end up with multiple iframes, as the recaptcha creates a new one each time it is mounted. This is, in essence, a memory leak as these hidden elements just keep adding up and never get cleaned up until a full page refresh.

[Barjaktarevic]

I have the exact same issue; the recaptcha is inside the body of a chat widget. Every time the user opens the widget, a new iframe is created, and the previous one(s) remain in the document.

This seems to happen every time the recaptcha is inside a component that is conditionally rendered.

[PutawanDE]

Might be related to this issue happening during client-side navigation #217