title: Using react-google-recaptcha-v3 library
body: <p>I'm new to react and trying to use the react-google-recaptcha-v3 library.</p>
  
  <p>I'm using it with a formik form and posting the data with axios. It works when I post a hardcoded recaptcha token in my header. But when I try to use the token with the react-google-recaptcha-v3 library it does not work. I think I'm using it wrong or somthing.</p>
  
  <pre><code>return (
    &lt;GoogleReCaptchaProvider reCaptchaKey='MY-KEY'&gt;
      &lt;GoogleReCaptcha onVerify={token =&gt; this.setState({ recaptchaToken: token })} /&gt;
    &lt;Grid&gt;
      &lt;Row&gt;
        &lt;Col xs={6} xsOffset={3} id='auth-form-container'&gt;
          &lt;Formik
            initialValues={{ email: "" }}
            validationSchema={forgotPasswordSchema}
            onSubmit={(values, { setErrors, setSubmitting }) =&gt; {
  
              const headers = {
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json",
                  recaptcha: this.state.recaptchaToken
                }
              };
  
              const body = {
                UsernameOrEmail: values.email,
                ReturnUrl: "/"
              };
  
              const url = "http://localhost:5000/api/Users/ResetPassword";
  
              axios
                .post(url, body, headers)
                .then(result =&gt; {
                  // Do somthing
                  setSubmitting(false);
                  this.handleSuccess(result);
                })
                .catch(error =&gt; {
                  // Do somthing
                  setSubmitting(false);
                  //TODO: Add logging
                  console.log("Fejl");
                  if (error.response.status === 400) {
                    console.log("Bad Request ...");
                    this.setState({ errorMessage: "Bad Request" });
                  } else {
                    console.log("Something went wrong ...");
                    this.setState({ errorMessage: "Something went wrong" });
                  }
                });
            }}&gt;
            {({ isSubmitting }) =&gt; (
              &lt;Form&gt;
                {errorMessage ? &lt;Error errorMessage={errorMessage} /&gt; : null}
                &lt;Row&gt;
                  &lt;Col xs={12}&gt;
                    &lt;label htmlFor='email'&gt;E-mail:&lt;/label&gt;
                    &lt;Field type='email' name='email' /&gt;
                    &lt;ErrorMessage name='email'&gt;{msg =&gt; &lt;div className='error'&gt;{msg}&lt;/div&gt;}&lt;/ErrorMessage&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;Row&gt;
                  &lt;Col xs={12}&gt;
                    &lt;button type='submit' disabled={isSubmitting}&gt;
                      Reset password
                    &lt;/button&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;Row&gt;
                  &lt;Col xs={12}&gt;
                    &lt;ul&gt;
                      &lt;li&gt;
                        &lt;Link to='/'&gt;Back to login&lt;/Link&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Grid&gt;
    &lt;/GoogleReCaptchaProvider&gt;
  );
  </code></pre>