Sample for function based react?

[ruslanguns]

I tried this... but doesn't seem to be working:

import React from 'react';
import { useForm } from 'react-hook-form';
import { ReCaptcha, loadReCaptcha } from 'react-recaptcha-v3';

const verifyCallback = token => {
  console.log(token, 'verifycallback')
}

export const FormScreen = () => {
  const emailRegx=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  const { register, handleSubmit, errors, formState } = useForm({ mode: 'onChange' });
  const onSubmit = (data) => {
    console.log(data);
  }
  const componentDidMount = () => {
    loadReCaptcha('6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo')
  }


  return (
    <div className="widget-container">

      <div className="container pt-4">
        <div className="row">
          <div className="col-12">
            <form onSubmit={handleSubmit(onSubmit)} autoComplete="off" noValidate>
              <div className="form-row">

                <div className="col-sm-6 mb-3">
                  <label htmlFor="subject">Nombre</label>
                  <input
                    type="text"
                    id="firstname"
                    name="firstname"
                    ref={register({ required: true, minLength: 2 })}
                    className={`form-control ${errors.firstname && 'is-invalid'} form-control-lg`}
                    />
                  {
                    errors.firstname &&
                    (<div className="invalid-feedback d-block">
                      {
                        errors.firstname.type === 'required' && 'Este campo es obligatorio' ||
                        errors.firstname.type === 'minLength' && 'Debe introducir como mínimo dos caracteres'
                      }
                    </div>)
                  }
                </div>

                <div className="col-sm-6 mb-3">
                  <label htmlFor="company">Empresa</label>
                  <input
                    type="text"
                    id="company"
                    name="company"
                    ref={register({ required: false })}
                    className="form-control form-control-lg"
                    autoComplete="off"/>
                </div>

              </div>

              <div className="col-12 mt-4">  
                <div className="text-center">
                  <button
                    type="submit"
                    id="sendContactButton"
                    disabled={!formState.isValid}
                    data-sitekey="6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo"
                    data-callback='onSubmit'
                    data-action='submit'
                    className="btn btn-primary btn-lg btn-block">
                    Enviar
                  </button>
                  <ReCaptcha
                    sitekey='6LeLZ7AZAAAAAB5tTLi-L5I5atxIZa6W6r0JwjSo'
                    action='submit'
                    verifyCallback={verifyCallback}
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

    </div>
  );
}