reCAPTCHA has already been rendered in this element

**Description**
When using react-recaptcha in a GatsbyJS project and switching between pages containing the same component with a reCAPTCHA, rendering fails. It also fails when opening a direct link to one of the two pages.


**Reproduction**
- See repo https://github.com/philonor/gatsby-recaptcha-reproduction that is a gatsby-starter-default clone with two more pages [`contact-en.js`](https://github.com/philonor/gatsby-recaptcha-reproduction/blob/repro/src/pages/contact-de.js) and [`contact-de.js`](https://github.com/philonor/gatsby-recaptcha-reproduction/blob/repro/src/pages/contact-de.js) that both contain the same [`ContactForm`](https://github.com/philonor/gatsby-recaptcha-reproduction/blob/repro/src/components/contact-form.js) component which uses react-recaptcha to render a recaptcha.
- Clone it, run `npm i`, then `gatsby build && gatsby serve`, then browse to `http://localhost:9000/contact-de/` to reproduce the error (you may have to hit the refresh button a few times until the error occurrs).

**Workarounds**
- Requiring explicit rendering and specifying an `onloadCallback` seem to fix the issue https://github.com/appleboy/react-recaptcha/issues/181#issuecomment-280800414

**Related**
- https://github.com/appleboy/react-recaptcha/issues/229
- https://github.com/appleboy/react-recaptcha/issues/181
- https://github.com/escaladesports/gatsby-plugin-recaptcha/issues/1