Necesito agregar validación para el campo de nombre en el componente funcional de reactjs pero no sé por qué no funciona. Acabo de agregar el nombre del formulario de validación y, al hacer clic en el botón Enviar, necesito mostrar la validación si el nombre no está definido. ¿Qué hay de malo en mi código?

 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> );