Simple React form with validation

form.js

import { useState } from "react";

function Form() {
  const [name, setName] = useState("");
  const [message, setMessage] = useState("");
  const [email, setEmail] = useState("");
  const [submitClicked, setSubmitClicked] = useState();
  const [formError, setFormError] = useState([]);

  const submit = () => {
    setFormError(validateForm());
    setSubmitClicked(true);
  };

  const validateForm = () => {
    let errors = [];

    if (name.length < 1) {
      errors.push("Name required.");
    }
    if (email.length < 1) {
      errors.push("Email required.");
    }
    if (!email.includes("@")) {
      errors.push("Email required.");
    }
    if (message.length < 1) {
      errors.push("Message required.");
    }
    return errors;
  };

  const onChangeFocus = () => {
    setFormError(validateForm());
  };

  const defaultStyle = {
    width: "100%",
    padding: "6px",
  };
  const errorStyle = {
    width: "100%",
    padding: "6px",
    borderColor: "red",
    borderWidth: "4px",
  };

  return (
    <div className="App">
      <header className="App-header">
        <p>Fill in the blank-ity blanks!</p>
        <div style={{ width: "100%" }}>
          <input
            id="name"
            value={name}
            placeholder="Name"
            onChange={(e) => setName(e.target.value)}
            onBlur={onChangeFocus}
            style={
              formError.includes("Name required.") ? errorStyle : defaultStyle
            }
          />
          <input
            id="email"
            value={email}
            placeholder="Email"
            onChange={(e) => setEmail(e.target.value)}
            onBlur={onChangeFocus}
            style={
              formError.includes("Email required.") ? errorStyle : defaultStyle
            }
          />
          <div>&nbsp;</div>
          <textarea
            id="message"
            value={message}
            placeholder="Message"
            onChange={(e) => setMessage(e.target.value)}
            onBlur={onChangeFocus}
            style={
              formError.includes("Message required.")
                ? errorStyle
                : defaultStyle
            }
          />
          <button onClick={submit}>Submit</button>
        </div>
        {submitClicked && !formError.length > 0 ? (
          <div
            style={{
              width: "100%",
              marginTop: "20px",
              backgroundColor: "white",
              color: "black",
            }}
          >
            <p>Form Submitted!</p>
          </div>
        ) : null}
        {submitClicked && formError.length > 0 ? (
          <div
            style={{
              width: "100%",
              marginTop: "20px",
              backgroundColor: "white",
              color: "red",
            }}
          >
            {formError.map((error, key) => (
              <p key={key}>{error}</p>
            ))}
          </div>
        ) : null}
      </header>
    </div>
  );
}

export default Form;