Проблема с валидацией формы на React

Не работает правильно валидация формы. Первый раз при добавлении продукта, если не заполнено поле то выдает ошибку и не добавляет продукт. После успешного добавления продукта, при попытке добавить еще продукт ошибку не выдает и с пустыми полями добавляется продукт. Ссылка на гит https://github.com/Krist-W/react-second Просьба помочь разобраться

import Button from "components/Button";
import { useEffect, useState } from "react";
import uuid4 from "uuid4";

const ProductForm = ({ addProduct }) => {const products = ["Хлебобулочные изделия", "Молочные продукты", "Рыба", "Мясо", "Бакалея", "Кондитерские изделия", "Фрукты и овощи"]

let id = uuid4();
uuid4.valid(id);
const [title, setTitle] = useState("")
const [weight, setWeight] = useState("")
const [type, setType] = useState(products[1])
const [titleDirty, setTitleDirty] = useState(false)
const [weightDirty, setWeightDirty] = useState(false)
const [erTitle, setErrorTitle] = useState("Поле не может быть пустым")
const [erWeigth, setErrorWeigth] = useState("Поле не может быть пустым")
const [formValid, setFormValid] = useState(false)
const handleClick = event => {
    event.preventDefault()
    const product = {
        id,
        title: title,
        weight: weight,
        type: type
    }
console.log(product)
addProduct(product)
setTitle("")
setWeight("")
setType(products[1])
}

const errorTitle = (event) => {
    setTitle(event.target.value)
    if (!event.target.value) {
        setErrorTitle("Поле не может быть пустым")
   } else {
    setErrorTitle("")
   }
}

const errorWeight = (event) => {
    setWeight(event.target.value)
    if (!event.target.value) {
        setErrorWeigth("Поле не может быть пустым")
   } else {
    setErrorWeigth("")
   }
}

const blurHandler = (event) => {
    switch (event.target.name) {
        case "title":
            setTitleDirty(true)
            break
        case "weight":
            setWeightDirty(true)
            break
    }
}

useEffect(() => {
    if (erTitle || erWeigth) {
    setFormValid(false)
    } else {
    setFormValid(true)
    }
}, [erTitle, erWeigth]

)





return (
<div>
    <form className="max-w-sm mx-10 my-10 gap-y-4 flex flex-col ml-auto mr-auto text-base text-gray-700 font-semibold">
<div className="grid grid-cols-3 gap-y-4">
    <label className="col-span-1">Название</label>
    {(titleDirty && erTitle) && <div className="text-rose-700">{erTitle}</div>}
    <input
    
    onBlur={(event) => blurHandler(event)}
    onChange={(event) => errorTitle(event)}
  // console.log(event.target.value) таргет это цель т.е то куда нажали, value наш инпут
    value={title} 
    name="title" 
    type="text" 
    className="col-span-2 border border-solid border-gray-400 rounded"
    required />
</div>

<div className="grid grid-cols-3 gap-y-4">
    <label className="col-span-1">Количество/Вес</label>
    {(weightDirty && erWeigth) && <div className="text-rose-700">{erWeigth}</div>}
    <input 
    onBlur={(event) => blurHandler(event)}
    onChange={(event) => errorWeight(event)}
    value={weight} 
    name="weight" 
    type="text" 
    className="col-span-2 border border-solid border-gray-400 rounded" />
</div>

<div className="grid grid-cols-3 gap-y-4d grid-cols-3 gap-y-4">
    <label className="col-span-1">Вид продукта</label>
    <select value={type} onChange={(event) => setType(event.target.value)} className="col-span-2 border border-solid border-gray-400 rounded">
        {/* <option>Рисование</option>
        <option>Программирование</option>
        <option>Психология</option>
        <option>Математика</option>
        <option>Дизайн</option> */}
    {products.map(type => {
        return (
        <option key={type}>{type}</option>
        )
    })}
    </select>

</div>

<Button title="Добавить продукт" handleClick={handleClick} type="submit" disabled={!formValid} />

</form>

</div>

function Button(props) {
  const { title, handleClick, type, disabled } = props;

  return (
    <button disabled={disabled} type={type} onClick={event => handleClick(event)} className="transition duration-0 hover:duration-700 bg-gradient-to-r from-[#FABCC6] hover:from-[#ed92a0] text-gray-800 p-3 m-3 item-center border border-solid border-colour-white text-colour-white rounded-full text-xl font-semibold px-4 py-2 shadow-md">
      {title}
    </button>
  );
}

export default Button;