Using react-google-recaptcha with react-final-form

Question

I need to implement recaptcha in my form but i cant figure how to do it right.

The problem is that recaptcha is async and when its in invisible mode the token is availiable almoast instantly, but when the user has to select trafic lights it could take a while.

How can i delay sending the form and so it can wait for the token value and yet use the onSubmit for returning server side validation erros to the form?

Maybe I should use something else than react-google-recaptcha ?

Below is something that kind of works, but it looks hacky too me and there should be a better way to do this.

function FormBuilder(props: FormBuilderProps): ReactElement<FormBuilderProps> {
  const recaptchaRef = React.createRef()

    const getCaptchaCode = async () => {
        return new Promise(((resolve, reject) => {
            recaptchaRef.current.execute();

            let counter = 0;
            // Wait for captcha value to appear
            const checker = setInterval(()=>{
                const value = recaptchaRef.current.getValue();
                counter++;
                if (value) {
                    clearInterval(checker);
                    resolve(value);
                }
                // kill form submition after couple of minutes (how does it take to select  all the traffic ligths :))
                if (counter > 600) {
                    clearInterval(checker);
                    reject();
                }
            }, 500);
        }))
    }

  const onFormSubmit = async (values) => axios
      .post(target, {
          captcha: await getCaptchaCode(),
          ...values,
      })
      .catch((error) => {
          return handleSubmitErrors(error);
      })

  return (
    <Form
      onSubmit={onFormSubmit}
      render={({
        handleSubmit,
        submitting,
      }) => {
        return (
          <form>
            {/* form fields */}
            <ReCAPTCHA
              size="invisible"
              sitekey={config.getReCaptchaSiteKey()}
              ref={recaptchaRef}
              asyncScriptOnLoad={() => {
                  setRecaptchaLoaded(true);
              }}
            />
            <Submit
              handleSubmit={handleSubmit}
              submitting={submitting}
            />
          </form>
        )
      }}
    />
  )
}

``