React 18 - Trans component interpolation issue

[enoh-barbu]

I've just upgraded to react v18 but I get an error while doing interpolation using Trans component

<Trans i18nKey="pageNrOfAll" pageNr={pageNr} pagesCount={pagesCount}>
    Page
    <strong className="spacing">{{ pageNr }}</strong>
    of
    <strong className="spacing">{{ pagesCount }}</strong>
 </Trans>

Type '{ pageNr: number; }' is not assignable to type 'ReactNode'.
  Object literal may only specify known properties, and 'pageNr' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.ts(2322)
index.d.ts(1375, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'

If I keep only one pair of brackets { pageNr } I get the following error

react-i18next:: Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.

https://codesandbox.io/s/brave-bohr-obwf63

I've just posted the same question on stackoverflow

[adrai]

probably duplicate of #1483

[adrai]

v11.16.8 offers allowObjectInHTMLChildren option