I need to add validation for name field in reactjs functional component but don't know why its not working ? I have just added valditaion form firstname and clicking on the submit button i need to show the validation if firstname is undefined. Whats wrong in my code ?

const [state, setState] = React.useState({
    data: {
      firstName: 'milan',
      lastName: 'sai',
      number: '999,
    },
    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.' });
    }
};

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} />
      <p>{state.firstNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={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} />
      <p>{state.numberValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => valid()} />
    </div>
  );