Repository: ui
Issue: [bug]: Showing "undefined" in <FormMessage />
Labels: bug

### Describe the bug

I have a field named **fieldConfiguration.inputConfiguration.options**, It's validation schema check that there should be atleast two objects in the array. If there is no field added then it showing correct field error "Array must contain at least 2 element(s)" , but when I add one field, it shows "undefined".


**Screenshots**
| No Field added | One Field added |
| --- | --- |
| ![image](https://github.com/shadcn-ui/ui/assets/29487686/562bdb4b-3be0-404a-be13-80bcfd6f42a8) | ![image](https://github.com/shadcn-ui/ui/assets/29487686/c71b28c2-8ac8-4f16-a9f6-cdd1027b4921) |



**Solution**
I have checked the logs by putting console.log inside the component `FormMessage`, I think when I am getting "undefined" error message then in the Error Object there is no `message` key. I have attached the logs below.

I would like to Make Pull request for this FIX.

**Replace code:**
```
const body = error ? String(error?.message) : children;
```

**With this one:**
```
  const body = error ? String(error?.message || error?.root?.message) : children;
```

### Affected component/components

Form -> <FormMessage />

### How to reproduce

Try to use below code

**Validation Schema:**
```
const choiceOptionSchema = z.object({
  value: z.string().min(1),
});

export const multipleChoiceInputConfigSchema = z.object({
  options: choiceOptionSchema.array().min(2),
  allowMultiple: z.boolean().optional(),
});
```

**Next.js Code:**
```
  const { fields, append } = useFieldArray({
    control: formHook.control,
    name: "fieldConfiguration.inputConfiguration.options",
  });
...// Some code
      <FormField
        control={formHook.control}
        name="fieldConfiguration.inputConfiguration.options"
        render={({ field }) => (
          <FormItem>
            {fields.map((field, index) => (
              <FormField
                key={field.id}
                control={formHook.control}
                name={`fieldConfiguration.inputConfiguration.options.${index}.value`}
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <Input placeholder="Choice Value" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            ))}
            <FormMessage />
          </FormItem>
        )}
      />
```

### Codesandbox/StackBlitz link

_No response_

### Logs

```bash
Below are logs from inside the component `FormMessage`,


const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField();
  console.log({ error });
```


No Feild error:
{
    "error": {
        "message": "Array must contain at least 2 element(s)",
        "type": "too_small",
        "ref": {
            "name": "fieldConfiguration.inputConfiguration.options"
        }
    }
}


One Field Error:
{
    "error": {
        "root": {
            "message": "Array must contain at least 2 element(s)",
            "type": "too_small",
            "ref": {
                "name": "fieldConfiguration.inputConfiguration.options"
            }
        }
    }
}
```


### System Info

```bash
OS: Ubuntu 22.04.4 LTS x86_64
Browser: Google chrome Version 126.0.6478.114 (Official Build) (64-bit)
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues