Google Recaptcha

[OTaylorUK]

I'm trying to add google Recaptcha (react-google-recaptcha) to my form, everything works great until I try adding the Recaptcha.

I'm using Yup to validate the form but I'm just struggling to get the 'onSubmit' to fire.

`
export const ContactForm = ({ }) => {

const TEST_SITE_KEY = "HIDDEN";

const SignupSchema = Yup.object().shape({
	recaptcha: Yup.string().required(),
	from_name: Yup.string()
		.min(2, 'Too Short!')
		.max(50, 'Too Long!')
		.required('Required'),
 
	message: Yup.string()
		.required('Required'),
 
	email: Yup.string()
		.email('Invalid email')
		.required('Required'),
 
});
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
const recaptchaRef = createRef();

function onChange(value) {
	alert("Captcha value:", value);
}

return (

	  <Formik
		initialValues={{
			to_name: '',
			from_name: '',
			email: '',
			message: '',
			recaptcha: '',
		  }}
		validationSchema={SignupSchema}
		  
		onSubmit={async (values) => {
			await sleep(500);
			recaptchaRef.current.execute()
			console.log('values::', values);
		
		}}
		  
		  
	  >
		  {(props) => {
			  console.log(props);
			  const { errors, touched, values } = props;

			  const onVerify = e => {
				console.log(e);
			};
			  return (
				<Form>
					<div className="field-group">
						<label htmlFor="from_name">First Name</label>
						<Field id="from_name" name="from_name" placeholder="Jane" />
						{errors.from_name && touched.from_name ? (
						<div>{errors.from_name}</div>
						) : null}
					</div>
					
					<div className="field-group">
						<label htmlFor="email">Email</label>
						<Field
						id="email"
						name="email"
						placeholder="your@email.com"
						type="email"
						/>
						{errors.email && touched.email ? (
						<div>{errors.email}</div>
						) : null}
					</div>
					
					<div className="field-group">
						<label htmlFor="message">Message</label>
						<Field
						id="message"
						name="message"
						as="textarea"
						/>
						{errors.message && touched.message ? (
						<div>{errors.message}</div>
						) : null}
					</div>
					
						<div className="field-group">
							<ReCAPTCHA
								ref={recaptchaRef}
								sitekey={TEST_SITE_KEY}
								size="invisible"
							  	onVerify={onVerify}
							/>
						<button disabled={props.isSubmitting}  type="submit">Submit</button>
					</div>
				</Form>
			  )
		  }}
	</Formik>
</div>