Validation error not shown when field is an array

[GerardGarcia]

I've got a zod schema as follows

export const schema = z.object({
  id: z.string().min(1).optional(),
  name: z.string().min(1),
  description: z.string().min(1).optional(),
  emails: z.array(z.string().email()),
})

And I'm using a custom input for this field:

            <Field name="emails">
              {({ Label, Errors, ...props }) => (
                <FormControl isInvalid={Boolean(props.errors)}>
                  <Label />
                  <CreatableSelect
                    isClearable
                    isMulti
                    isInvalid={Boolean(props.errors)}
                    name="emails[]"
                    placeholder="Enter email address"
                    components={{ DropdownIndicator: null }}
                    inputValue={emailInputValue}
                    menuIsOpen={false}
                    onInputChange={setEmailInputValue}
                    onKeyDown={(event) => {
                      if (!emailInputValue) return
                      switch (event.key) {
                        case 'Enter':
                        case 'Tab':
                          if (emails && !emails.includes(emailInputValue)) {
                            setValue('emails', [...emails, emailInputValue])
                          } else if (!emails) {
                            setValue('emails', [emailInputValue])
                          }
                          setEmailInputValue('')
                          event.preventDefault()
                      }
                    }}
                    onChange={(newValue) => {
                      setValue(
                        'emails',
                        newValue.map((v) => v.value),
                      )
                    }}
                    value={emails && emails.map((e) => ({ label: e, value: e }))}
                  />
                  <Errors />
                </FormControl>
              )}
            </Field>

Apparently, if the emails do not have the proper format nothing happens on submission due to the client-side validation failing but neither the Error component nor the props.errors show what happened.

If I change the zod schema to something like requiring that the array has a min number of elements emails: z.array(z.string().email()).min(2) and force it to fail by submitting less elements than required I can see the error as expected so it looks like everything is properly setup and that the problem is when validating the elements inside the array.

Is this a bug or I'm missing something? Thanks