submit not firing on first click in react app

Question

I have a bootstrap react form with validation, and I am using the email.js library to send emails to the client side instead of axios http request (this is to prevent sending data to the serve-side) onSubmit only sends on double click due to the if statement function checking if validation is true. If I remove this function the onSubmit will fire on one click but will bypass validation checks.

Is there another way I can write this code? Possibly with useEffect()? The onSubmit usually is for firing the validation function, however, the email.js library uses the onSubmit to send data which forces me to make custom validation forms and I am not able to be successful to fire the onSubmit with one click

import React, { useState, useRef } from "react";
import { Col, Button, Form, Card, InputGroup } from "react-bootstrap";
import emailjs from "@emailjs/browser";

 const refForm = useRef();

//for validity
const [validated, setValidated] = useState(false);
const [formSubmitted, setFormSubmitted] = useState(false);

// email.js to send data to client
const sendEmail = (e) => {
e.preventDefault();
e.stopPropagation();

setFormSubmitted(true);

const form = e.currentTarget;
if (form.checkValidity() === false) {
}

setValidated(true);
 if (validated === true) {

 // email.js code here
 console.log("email.js has sent the email")
 }
};

 return (

          <Form
            ref={refForm}
            onSubmit={sendEmail}
            autoComplete="on"
            noValidate
            validated={validated}
          >
            <Form.Label>Full Name*</Form.Label>
            <Form.Group>
              <InputGroup hasValidation>
                <Form.Control
                  name="name"
                  type="text"
                  required
                  minLength={3}
                  maxLength={20}
                />
                <Form.Control.Feedback type="invalid">
                  Full name required
                </Form.Control.Feedback>
              </InputGroup>
            </Form.Group>

            <Form.Label>Email Address*</Form.Label>
            <Form.Group>
              <InputGroup hasValidation>
                <Form.Control
                  name="email"
                  type="email"
                  required
                />
                <Form.Control.Feedback type="invalid">
                  Please enter a valid email format
                </Form.Control.Feedback>
              </InputGroup>

          <Button
            type="submit"
            value="send"
          >
            SUBMIT
          </Button>
        </Form>

Answer 1

simple answer, needed to separate sendEmail() from the validation function using onChange event. I also needed to create checkString() to check string was empty and pass through the validation function.

  // check if string is empty
  const checkString = () => {
    // console.log("name", fullName)
    if (fullName.length === 0) {
      console.log("empty");
      setTest(true);
    }
  };

    const sendEmail = (e) => {
    //email.js code 
    }

    const validateEmail = (e) => {
    checkString();

    const form = e.currentTarget;
    if (form.checkValidity() === false) {
    }
    setValidated(true);
  };

          <Form
        onSubmit={sendEmail}
        onChange={validateEmail }
      >