错误：reCAPTCHA已在Object.Hr [as render]中的此元素中呈现

Question

我有一个带有recaptcha的表单，它在同一页面上显示两次。一旦加载页面，如果单击一个模态，可能再次加载。

问题是当表单必须再次呈现时，我收到以下错误：

Error: reCAPTCHA has already been rendered in this element
       at Object.Hr [as render]

我的代码使用react-recaptcha：

form component:
...
    <Button
      onClick={this.executeCaptcha} 
      disabled={this.isFromValid() ? false : true}
    >
      Submit
    </Button>
    <Recaptcha
      ref={e => recaptchaInstance = e}
      sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXX"
      size="invisible"
      render="explicit"
      verifyCallback={this.verifyCallback}
      onloadCallback={this.captchaCallback}
    />
  </div>

index.html:
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

我该如何解决这个问题？