I have a form with 3 input filed FIRST NAME, LAST NAME, NUMBER. So once forms open there is a particular set of pre filled values coming from backend. So, if i try to add validation check for my firstname and if user makes the filed blank and click submit it shows me undefined in console for the respective firstname value. So, could someone help to add validation check for firstname, last name and number ??

const EditContact = inject('Contacts')(observer((props) => {
  const { text, Contactfirst, apptContacts } = props;
  const { updateContact } = apptContacts;
  const CMS = text.appointmentManager.editAppointmentContact;
  const [state, setState] = React.useState({
    data: {
      firstName: Contactfirst[0],
      lastName: Contactfirst[1],
      number: Contactfirst[2],
    },
    firstNameValid: '',
    lastNameValid: '',
    numberValid: '',
  });
  const handleTextareaChange = (event) => {
    const { data } = state;
    data[event.target.name] = event.target.value;
    setState({
      data,
    });
  };
  const valid = () => {
    if (state.data.firstName !== 'undefined') {
      setState({ firstNameValid: 'Required.Please enter your given name.' });
    }
  };
  const saveButton = () => {
    if (valid()) {
      const personName = `${state.data.firstName} ${state.data.lastName}`;
      const primaryContact = {
        name: personName,
        phoneNumber: state.data.number,
      };
    }
  };
  return (
    <div>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
        {CMS.heading1}
      </h1>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} />
      <p>{state.firstNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} />
      <p>{state.lastNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} />
      <p>{state.numberValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
    </div>
  );
}));

export default EditContact ;