Invisible recaptcha: recaptcha widget doesnt execute. #252

import React         from 'react'
import Link          from 'gatsby-link'

import Recaptcha from 'react-recaptcha'
let recaptchaInstance

class FeatureSection extends React.Component {
  
  executeCaptcha = () => {
    recaptchaInstance.execute();
  }
  verifyCallback = (response) => {
    if(response){
      console.log(response);
      // document.getElementById("mc-embedded-subscribe-form").submit();
    }
  }

  render(){
    return (
      <section id="features" className="services">
        <div className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 text-center zoomIn">
          <h1> Subscribe </h1>
          <p>Subscribe to our newsletter for updates on beta testing and our release date</p>
          <div id="mc_embed_signup" className="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1">
            <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" className="validate" noValidate="">
              <div id="mc_embed_signup_scroll">
                <div className="input-group mb-2 mr-sm-2">
                  <input type="email" name="EMAIL" className="email input-design" id="mce-EMAIL" placeholder="Email" required=""/>
                  <div className="input-group-prepend">
                    <button
                      type="button"
                      className="button btn btn-primary outline-border"
                      onClick={() => this.executeCaptcha()}
                      name="subscribe" id="mc-embedded-subscribe"
                    >  
                      Subscribe
                    </button>
                    <Recaptcha
                      ref={e => recaptchaInstance = e}
                      sitekey="#"
                      size="invisible"
                      verifyCallback={() => this.verifyCallback()}
                    />
                  </div>
                  <div style={{position: 'absolute', left: '-5000px'}}>
                    <input type="text" name="#" tabIndex="-1" value=""/>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </section>
    )
  }
} 

export default FeatureSection