ref.current is null in gatsby react app when trying to execute recaptcha

Question

I am trying to use this https://react-hook-form.com/get-started npm package with this package https://www.npmjs.com/package/react-google-recaptcha in gatsby and react. I want to use the invisible recaptcha it looks like I have to execute the recaptcha which I am trying to do by creating a react ref but it says the rec.current is null, Not quote sure what to do. The onSubmit function is where I am getting the null result, I was assuming I would be able to fire the captcha here and then get back the captcha value to later send off to google in my lambda function for verification.

Thanks ahead of time

Here is my code thus far

import React, { useState } from "react"
import Layout from "../components/layout"
import Img from "gatsby-image"
import { graphql, Link } from "gatsby"
import { CartItems } from "../components/cart"
import { useForm } from "react-hook-form"
import ReCAPTCHA from "react-google-recaptcha"

const StoreDetails = ({ data }) => {
  const { register, handleSubmit, watch, errors } = useForm()

  const recaptchaRef = React.createRef()

  const onSubmit = data => {
    console.log(recaptchaRef)
    recaptchaRef.current.execute() //this shows up null
  }


  function onChange(value) {
    console.log("Captcha value:", value)
  }

  function error(value) {
    alert(value)
  }

  return (
    <>
      {data.allSanityProducts.edges.map(({ node: product }, i) => {
        return (
          <React.Fragment key={i}>
            <Item>
              <Img
                fluid={product.featureImage && product.featureImage.asset.fluid}
              />
              <div>
               ...
                <form onSubmit={handleSubmit(onSubmit)}>
                  {/* register your input into the hook by invoking the "register" function */}
                  <input name="example" defaultValue="test" ref={register} />

                  {/* include validation with required or other standard HTML validation rules */}
                  <input
                    name="exampleRequired"
                    ref={register({ required: true })}
                  />
                  {/* errors will return when field validation fails  */}
                  {errors.exampleRequired && (
                    <span>This field is required</span>
                  )}
                  <ReCAPTCHA
                    className="captchaStyle"
                    sitekey="obsf"
                    onChange={onChange}
                    onErrored={error}
                    badge={"bottomright"}
                    size={"invisible"}
                    ref={recaptchaRef}
                  />
                  <input type="submit" />
                </form>
              </div>
            </Item>
          </React.Fragment>
        )
      })}
      {close && <CartItems />}
    </>
  )
}

const WithLayout = Component => {
  return props => (
    <>
      <Layout>
        <Component {...props} />
      </Layout>
      ...
    </>
  )
}

export default WithLayout(StoreDetails)

export const query = graphql`
  query StoreDeatailsQuery($slug: String!) {
    ...
  }
`

Answer 1

You are never populating the reference with any value. Initially is set to null in:

  const recaptchaRef = React.createRef()

You have to wait for the Google response to fill the recaptchaRef with a value. In other words, you need to use a promise-based approach to fill it using an executeAsync() and using an async function:

  const onSubmit = async (data) => {
    const yourValue = await recaptchaRef.current.executeAsync();

    console.log(yourValue)
  }

You can check for further details about the props exposed in react-google-recaptcha documentation.