add state so double submissions are prevented

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-contact-form",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.9",

src/ContactForm.js

@@ -1,10 +1,12 @@
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import emailjs from 'emailjs-com';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 
 const ContactForm = () => {
   const { register, errors, handleSubmit, reset } = useForm();
+  const [disabled, setDisabled] = useState(false);
 
   const toastifySuccess = () => {
     toast('Form sent!', {
@@ -22,12 +24,14 @@ const ContactForm = () => {
   const onSubmit = async (data) => {
     // Send form email
     try {
+      setDisabled(true);
       const templateParams = {
         name: data.name,
         email: data.email,
         subject: data.subject,
         message: data.message
       };
+      console.log('clicked');
 
       await emailjs.send(
         process.env.REACT_APP_SERVICE_ID,
@@ -38,6 +42,7 @@ const ContactForm = () => {
 
       reset();
       toastifySuccess();
+      setDisabled(false);
     } catch (e) {
       console.log(e);
     }
@@ -120,7 +125,8 @@ const ContactForm = () => {
                     {errors.message && <span className='errorMessage'>Please enter a message</span>}
                   </div>
                 </div>
-                <button className='submit-btn' type='submit'>
+
+                <button className='submit-btn' disabled={disabled} type='submit'>
                   Submit
                 </button>
               </form>

src/index.css

@@ -86,6 +86,12 @@ form {
   border: 2px solid var(--green);
 }
 
+.submit-btn:disabled:hover {
+  background-color: var(--dark);
+  color: var(--green) !important;
+  cursor: wait;
+}
+
 @media (max-width: 768px) {
   .submit-message {
     width: 125px;