I'm trying to display the error message I set using yup validation - my schema for displayName looks like this:

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

I'm using react-hook-form for my forms and my textfield goes something like this:

    <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=""
    />

Unfortunately, my screen goes blank. I tried looking for the reason why it happened and apparently, it's because of formState.errors?.displayName.message but at the same time, it contains the error message for my field. Is there any way I can access it so I can use it for my helperText?