Grabbing nested errors returns undefined

[emdrayallday]

Problem

Error messages and CSS changes do not show when using nested FormField names

<FormField
   name="credentials.password"
   validation={{
     validate: value => value === 'test' || 'Value does not equal test'
   }}
/>

Errors Object shows up like this

{
  errors: {
    credentials: {
      password: {
        message: 'Value does not equal test',
        type: 'validate',
      }
    },
}

FormField currently shows an error by

error={Boolean(errors[name])}

and shows a message by

errors[name]?.message

This only works on non nested field names. Validation works but showing errors does not.

Solution

FormField should use Lodash get utility function to grab errors