Validation should not work after input value is deleted

I have many inputs. These inputs have validations.

For example, number should not be entered in the name input. Validation working when the number is entered. Validation continues to work when I enter and delete a number value. This is how it works on all inputs. I think once I solve one, I can solve the others.

There is another problem;

For example, when the user starts typing in the card number input, the validation runs immediately. Clicking anywhere else, we expect validation to work, right?

const [nameValidationState, setNameValidationState] = useState({  error: false,  helperText: ''});const [cardNumberValidationState, setCardNumberValidationState] = useState({  error: false,  helperText: ''});

  const nameOnChange = (event) => {    if (nameValidator(event.target.value)) {      setNameValidationState({ error: false, helperText: '' });      setPaymentInfo({        ...paymentInfo,        firstname: event.target.value,      });    } else {      setNameValidationState({ error: true, helperText: 'name err' });      setPaymentInfo({        ...paymentInfo,        firstname: null,      });    }  };  const cardNumberOnChange = (event) => {    if (cardNumberValidator(event.target.value)) {      setCardNumberValidationState({ error: false, helperText: '' });      setPaymentInfo({        ...paymentInfo,        cardNumber: event.target.value === '' ? null : event.target.value,      });    } else {      setCardNumberValidationState({        error: true,        helperText: 'cardnumber err',      });      setPaymentInfo({        ...paymentInfo,        cardNumber: null,      });    }  };

<div className="paymentcreditcard__input"><AS.TextField   id="outlined-basic"   label={t('general.name')}   variant="outlined"   sx={{ width: '100%', maxWidth: '500px', margin: 'auto' }}   InputLabelProps={{    shrink: true,   }}   placeholder=""   onChange={handleFirstNameChange}   error={nameValidationState.error}   helperText={nameValidationState.helperText}   name="firstName"   value={paymentInfo.firstName} /></div><div className="paymentcreditcard__input"><AS.TextField    id="outlined-basic"    label={t('payment-credit-card.card_number')}    variant="outlined"    sx={{ width: '100%', maxWidth: '500px', margin: 'auto' }}    inputProps={{ maxLength: 16 }}    InputLabelProps={{     shrink: true,    }}    placeholder=""    onChange={handleCardNumberChange}    error={cardNumberValidationState.error}    helperText={cardNumberValidationState.helperText}    name="cardNumber"    value={paymentInfo.cardNumber} /></div>