Undefined message list for array validations

[JRebella]

Example using yup for validation: https://codesandbox.io/p/sandbox/react-hook-form-v7-validationschema-forked-l3l865?file=%2Fsrc%2Findex.js%3A60%2C11

Inside the render prop of the component, logging both parameters { message, messages } shows they're both undefined. Accessing the errors object directly from useFormState shows there's an array of errors for the field

[chrisalley]

I'm experiencing the same issue. As a workaround, to display the first message from the array, you can use the following code:

import type { GlobalError } from 'react-hook-form';

...

<ErrorMessage
  errors={errors}
  name={name}
  render={({ message }) => {
    function displayMessage(): string | undefined {
      if (Array.isArray(errors[name])) {
        const definedErrorArray: GlobalError[] = JSON.parse(JSON.stringify(errors[name])).filter((e: GlobalError) => !!e);
        if (definedErrorArray.length > 0) {
          return definedErrorArray[0].message;
        }
      }
      return message;
    }
    return displayMessage();
  }
/>