EmailJs and Form validation control - reactjs

Question

How do I add the verification of my fields!
I'm trying to send emails like this [emailjs][1], but I realise that I can also submit my empty form! So I'm wondering how to adjust my code so that it takes into account the verification of fields!
I have followed the documentation on emailjs about submitting a form with a name, email, subject, and message but there is one last problem! I've been following the documentation on emailjs regarding the submission of a form with a name, email, subject, and message, but there is still a problem: I am able to send my message successfully and I receive the data on emailjs and in my gmail mailbox, but I can also submit the empty form! How can I fix this? thank you
import React, { Fragment, useRef } from 'react';
import emailjs from 'emailjs-com';
import { Link } from 'react-router-dom';
import { NotificationContainer, NotificationManager } from 'react-notifications';
function Contact() {
const form = useRef();
const sendEmail = (e) => {
e.preventDefault()
emailjs
.sendForm(
'service_yyyyy',
'template_zzzz',
form.current,
'user_ttttt'
)
.then(
(result) => {
NotificationManager.success('Thank you for trusting us, we come back to you sooner.', 'Successful!', 2000);
}, (error) => {
NotificationManager.error('erreur dans le formulaire!', 'erreurs');
});
e.target.reset()
}
return (
<Fragment>
<div className="regular-page-area section-padding-100">
<div className="container">
<div className="row">
<div className="col-12">
<div className="page-content" style= {{backgroundColor:'white'}}>
<h4>text</h4>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
<section className="medium-padding120 bg-body contact-form-animation scrollme">
<div className="container">
<div className="row">
<div className="col col-xl-10 col-lg-10 col-md-12 col-sm-12 m-auto">
<div className="contact-form-wrap">
<div className="contact-form-thumb">
<div className="col-12">
<div className="section-heading">
<h3 style= {{color:'white'}}>Contact form</h3>
</div>
</div>
<h2 className="title"><span>SEND</span> <span>US YOUR</span><span>MESSAGE</span></h2>
<p>text</p>
<img src={require('../../images/crew.png')} alt="crew" className="crew" />
</div>
<form ref={form} onSubmit={sendEmail} className="contact-form">
<div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div className="form-group label-floating">
<label className="control-label"> Name</label>
<input
type="text"
className='form-control'
placeholder='Name'
name='name'
/>
</div>
</div>
<div className="col col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div className="form-group label-floating">
<label className="control-label"> Email</label>
<input
type="email"
className="form-control"
placeholder="youremail#gmail.com"
name='email'
/>
</div>
<div className="form-group label-floating">
<label className="control-label"> Subject</label>
<input
type='text'
className="form-control"
placeholder="Subject"
name='subject'
/>
</div>
<div className="form-group">
<textarea
name="message"
className="form-control"
placeholder="Your Message"
></textarea>
</div>
<button type="submit" className="btn btn-purple btn-lg full-width">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="half-height-bg bg-white"></div>
</section>
<NotificationContainer/>
<Footer />
</Fragment>
)
}
export default Contact;