React-i18next how to put dynamic html content?

Question

The result I want to see is as follows

Modules will be public on app.example.com

only the URL part should be dynamic and clickable with a html tag

my language file:

{
  "moduleWillBePublicOn" : "Modules will be public on <1>Portal URL</1>" 
}

my code:

const ShowModuleUrl = ({ moduleUrl }) => {
   return (
      <Trans i18nKey="moduleWillBePublicOn">
         Modules will be public on 
         <a href={moduleUrl}>{moduleUrl}</a>
      </Trans>
   );
};

The output I got is as follows

the link it goes to is correct. but I want to print moduleUrl variable instead of "Portal URL" like this

How can I get output like in the 2nd picture

Answer 1

 <Trans
     i18nKey="moduleWillBePublicOn"
     values={{ moduleUrl: moduleUrl}}
     components={[
        <a href={moduleUrl} target="_blank" rel="noreferrer">
           {moduleUrl}
        </a>,
     ]}>
  </Trans>