Type of TranslationValue for `t.rich` should include Element.JSX

[votrungquan1999]

Description

When using t.rich for rich text format, I see that I can use JSX.Element for the value, which displays correctly. However, the typescript gave me the error.

Type 'Element' is not assignable to type 'TranslationValue | ((chunks: ReactNode) => ReactNode)'

I think the library used under the hood also supports JSX.Element when formatting rich text. we could improve the typing here.

Another issue is that in the server component that renders the formatted key, this error happens

[ Server ] Each child in a list should have a unique "key" prop.

Verifications

• [X] I've verified that the problem I'm experiencing isn't covered in the docs.
• [X] I've searched for similar, existing issues on GitHub and Stack Overflow.
• [X] I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/votrungquan1999/reproduce-next-intl-typing

Reproduction description

1. Run npm run dev
2. see that the Seconds component is rendered by the t.rich
3. See the error report on the left side

https://github.com/user-attachments/assets/fe348f0e-a894-42d6-a08c-194f0769055b

Expected behaviour

• Typescript should not throw an error when injecting JSX
• The children with no key error should not happen

[amannn]

There's a note on this in the docs: How can I use “self-closing” tags without any chunks?.

This currently has some benefits related to upcoming type-safety of ICU args in the upcoming next-intl@4.0. If we'd accept ReactNode, this would for example also allow number, therefore defeating number formatting validation.

Due to this, I think it's not worth it changing this behavior for the time being.