Текстовое поле проверки React js

Я пытаюсь сделать проверку в reactjs. Например, у меня есть поле под названием «имя», и каждый раз, когда вы вводите имя, оно должно быть больше или равно 2. Это работает, когда имя меньше 2, но если оно больше 2, сообщение все равно появляется. Вот мой код:

const [data, setData] = React.useState({
nameValid: true,
prenumeValid: true,
check_textInputChange: false,
name: "",
});

const handleValidUser = (val) => {
if (val.length >= 2) {
  setData({
    ...data,
    nameValid: true,
  });
} else {
  setData({
    ...data,
    nameValid: false,
    });
    }
  };
  const textInputChange = (val) => {
  if (val.length >= 2) {
    setData({
    ...data,
    name: val,
    nameValid: true,
    check_textInputChange: true,
  });
} else {
  setData({
    ...data,
    name: val,
    nameValid: false,
    check_textInputChange: false,
  });
}
 };


 <TextField
      type = "text"
      variant = "outlined"
      label = "Nume"
      required
      fullWidth
      autofocus
      validate
      style = {{ marginBottom: "1em" }}
      onChange = {(val) => textInputChange(val)}
      onBlur = {(e) => handleValidUser(e)}
    />
    {data.nameValid ? null : (
      <text>The name has to be at least 2 letters long</text>
    )}