I have a input component that does validation. In a reduced form it looks like this:

const InputField = ({validation, name}) => {
  const [value, setValue] = useState("");
  const [error, setError] = useState(false);

  const handleChange = (e) => {
    let errors = 0;

    if (validation.includes("required") && val === "") {
      errors  ;
    }
    
    if (errors > 0) {
      setError(true);
    } else {
      setError(false);
    }
    setValue(e.target.value)
  }

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      name={name}
    />
  );
};

If I am using this component multiple times in a parent like

const Parnet = () => {

  //