any idea how can I extend the FormMessage to localise the error message?

[huangfulei]

Here is my thought:

Solution 1: pass i18n to the component const FormMessage = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>

(({ className, i18n, children, ...props }, ref) => { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message) : children; const localisedBody = i18n.exists(body) ? i18n.t(body) : body;

...

Solution 2: prioritize "children" so we can pass localized children from the parent component. const FormMessage = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>

(({ className, children, ...props }, ref) => { const { error, formMessageId } = useFormField(); // const body = error ? String(error?.message) : children; const body = children ? children: String(error?.message);