Estoy tratando de mostrar el mensaje de error que configuré usando la validación yup: mi esquema para displayName se ve así:

 displayName: yup.string().required("Please enter a username")

Estoy usando react-hook-form para mis formularios y mi campo de texto es algo como esto:

 <Controller render={({ field, formState }) => ( <TextField {...field} label="display name" error={!!formState.errors?.displayName} helperText={!!formState.errors?.displayName ? formState.errors?.displayName.message : null} /> )} name="displayName" control={control} defaultValue="" />

Desafortunadamente, mi pantalla se queda en blanco. Intenté buscar la razón por la que sucedió y, aparentemente, se debe a formState.errors?.displayName.message pero, al mismo tiempo, contiene el mensaje de error de mi campo. ¿Hay alguna forma de acceder a él para poder usarlo para mi helperText ?