Invisible reacaptcha position problem when submitting redux form

I have problem with invisible recaptcha in react. I have registration form in modal window and if the recaptcha is showed and i am detected as a bot, the puzzle box is sending the user to the bottom of the page. The recaptcha puzzle is adding a div to the DOM and for positioning is using the top: max of the screen property.

This is the npm package that i am using https://www.npmjs.com/package/react-google-recaptcha

export class Registration extends React.Component {
   onRecaptchaChange = (recaptchaResponse) => {
    const data = {
      form: this.state.form,
      recaptchaResponse,
    };

    this.props.submitQuickSignupDetails(data);
  };

  submitQuickSignupDetails = (form) => {
    this.setState({ form: form.toJS() });
    this.captcha.reset();
    this.captcha.execute();
  };

  render() {
    return (
     <React.Fragment>
       <RegistrationForm
         onSubmit={this.submitQuickSignupDetails}
         onAlreadyRegistered={this.props.hideSignupModal}
        />
       <ReCaptcha
        ref={(ref) => { this.captcha = ref; }}
        sitekey={XXXXXXX}
        size="invisible"
        badge="bottomleft"
        onChange={this.onRecaptchaChange}
       />
    </React.Fragment>
   );
  }
}

For now the only possible solution that is just resolving my problem only the first time that the recaptcha is triggered is:

submitQuickSignupDetails = (form) => {
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const nodesList = mutation.addedNodes;
    for (let idx = 0; idx < nodesList.length; idx += 1) {
      const node = nodesList.item(idx);

      if (node.tagName && node.tagName === 'DIV' && node.querySelector('iframe[title="recaptcha challenge"]')) {
        const visibilityInterval = setInterval(() => {
          if (node.style.visibility === 'visible') {
            node.style.top = `${window.scrollY + 150}px`;
            clearInterval(visibilityInterval);
            observer.disconnect();
          }
        }, 250);
      }
    }
  });
});

this.setState({ form: form.toJS() });
this.captcha.reset();
this.captcha.execute().then(() => {
  observer.observe(document.body, {
    childList: true,
  });
});

};

But if the user make mistake during resolving the recaptcha puzzle the recaptcha is sending the user to the bottom of the page again