executeRecaptcha not loaded

[viliuscicenas]

When I try to implement useGoogleReCaptcha, executeRecaptcha doesn't ever initialize. Here is code example (these components are not at the highest level):

const Content = () => {
  const rid = useSelector((state: FormInstanceState) => state.rid);

  return (
    <GoogleReCaptchaProvider
      reCaptchaKey={rid}
      useEnterprise={true}
      scriptProps={{
        async: true,
        appendTo: 'body',
      }}
    >
      <InnerContent />{' '}
    </GoogleReCaptchaProvider>
  );
};

const InnerContent = () => {
  const dispatch = useDispatch();
  const { handleSubmit } = useForm({ mode: 'all' });
  const { executeRecaptcha } = useGoogleReCaptcha();
  const { isLoading } = useSelector((state: FormState) => state);

  const onSubmit = (data: any) => {
    dispatch(
      submitForm({
        executeRecaptcha,
        data,
      })
    );
  };

  const isReady = !isLoading && !!executeRecaptcha;
  return (
    <>
      {!isReady && <LoaderShade />}
      <div className='row'>
        <div className='col-12'>
          <div className='umbraco-forms-form'>
            <form onSubmit={handleSubmit(onSubmit)}>// form content</form>
          </div>
        </div>
      </div>
    </>
  );
};