I got an error once the form is submitted:

TypeError: e.preventDefault is not a function.

Here is my code:

import {React} from 'react';

import emailjs from 'emailjs-com';

import {useForm} from "react-hook-form";



const NameForm = () => {

  const { register, handleSubmit, formState: { errors } } = useForm();

  const sendEmail = (e) => {

    e.preventDefault();



    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')

      .then((result) => {

          console.log(result.text);



      }, (error) => {

          console.log(error.text);

      });

      e.target.reset();

  }



    return (

      <div>

        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>

        <form className="contact-form" onSubmit={handleSubmit(sendEmail)}>

          <div className="form-group mb-0 py-3">

            <textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" {...register("message", { required: true })}></textarea>

            {errors.message && <span className="invalid-feedback d-block">Please fill out this field.</span>}

          </div>        

          <div className="form-group row py-2 mb-0">

              <div className="col-md-6">

                <div>

                  <div className="d-flex align-items-center">

                    <input className="mr-2" type="checkbox" id="yes_i_understand" name="yes_i_understand" {...register("yes_i_understand", { required: true })} />

                    <label className="font-size-12 mb-0" htmlFor="yes_i_understand">I understand and agree to the Privacy Policy and Terms and Conditions.</label>

                  </div>{errors.yes_i_understand && <span className="invalid-feedback d-block">You must agree before submitting.</span>}

                </div>

              </div>

              <div className="col-md-6 text-center text-md-left py-2 py-md-0">

                <input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />

              </div>

            </div>

        </form>

      </div>

    );



}

export default NameForm;

I saw the react hook form samples, but I'm not sure if i missed something on passing the data to the form.

You can check it here:
https://codesandbox.io/s/react-hook-form-using-emailjs-2k6x5