Self-closing REACT components in translation strings should not attempt to replace the component's children

[simkentys]

🐛 Bug Report

When using React components with children to replace self closing tags in translations, the children of react component is replaced.
Probably continuation of this issue: #1695

To Reproduce

https://stackblitz.com/edit/vitejs-vite-f6qrql?file=package.json,src%2Fmain.tsx%3AL41&terminal=dev

i18n.use(initReactI18next).init({
  interpolation: {
    escapeValue: false,
  },
});

function Link({ href, children }) {
  return <a href={href}>{children}</a>;
}

createRoot(document.getElementById('root')!).render(
  <>
      <Link href="#">linkTo</Link>
      <Trans
        i18nKey="<Component />"
        components={{ Component: <Link href="#">linkTo</Link> }}
      />
      <Trans
        i18nKey="<Component />"
        components={{ Component: <a href="#">linkTo</a> }}
      />
  </>
);

expected result:

<a href="#">linkTo</a>
<a href="#">linkTo</a>
<a href="#">linkTo</a>

actual result:

<a href="#">linkTo</a>
<a href="#"></a>
<a href="#">linkTo</a>

Expected behavior

React component children would be preserved

Your Environment

"i18next": "^24.0.2",
"react-i18next": "^15.1.2"

[adrai]

Feel free to provide a PR to address this.