Flatten yup array/shape errors

When using a validation schema like this:

type FormFields: {
  emails: string[]
  name: {
    first: string
    last: string
  }
}

const { form } = useForm<FormFields>({
  schema: yup.object().shape({
    emails: yup.array().of(yup.string().email()).min(1).required(),
    name: yup.object().shape({
      first: yup.string().required()
      last: yup.string().required()
    })
  }),
  initialValues: {
    emails: ['test@email.com', 'test']
    name: {
      first: 'Name'
      last: null
    }
  }
})

We're getting:

> form.errors
{
  emails[1]": { 
    ...,
    message: "Invalid email"
    path: "emails[1]"
  }
  "name.last": { 
    ...,
    message: "Field `name.last` is required"
    path: "name.last"
  }
}

This is a problem because we can't access the error with form.errors.emails or form.errors.name

PS: TypeScript get mad if you try to do something like:

form.errors['emails[0]']
> 'emails[0]' can't be used to index type 'Partial<Record<"emails"|"name", ValidationError>>'.
form.errors['name.last']
> 'name.last can't be used to index type 'Partial<Record<"emails"|"name", ValidationError>>'.