In react-intl since the deprecation of formatHtmlMessage api we had to substitute this functionality with custom solution, everything works well except that some of the placeholders are not being populated properly by intl.formatMessage, in one scenario i have a translation string:

en: Hello, {firstName} {lastName}!

et: Tere, {firstName} {lastName}!

and this works, it’s properly populated and the output is

"Tere, MARY ÄNN O’CONNEŽ-ŠUSLIK TESTNUMBER!"

and this is how i use the component

        <IntlMsg
          id="customer.title"
          shouldFormat
          values={{
            firstName: authentication.firstName,
            lastName: authentication.lastName,
          }}
        />

In the second scenario i have this translation string:

en: I have read the <a target="_blank" href={termsLink}>terms and conditions</a> and the <a target="_blank" href="{euTermsLink}">EU terms</a> and do not need any further clarification.

et: Olen tutvunud <a target="_blank" href={termsLink}>lepingu tingimustega</a>, <a target="_blank" href="{euTermsLink}"> Euroopa tarbijakrediidi standardinfo teabelehega</a>

and the output is:

Olen tutvunud <a target="_blank" href={termsLink}>lepingu tingimustega</a>, <a target="_blank" href="{euTermsLink}"> Euroopa tarbijakrediidi standardinfo teabelehega</a> ja täiendavate selgituste ja hoiatustega lehel: <a target="_blank" href="https://www.example.com/ee/smth "> https://www.example.com/ee/smth </a>, nendest aru saanud ning teadlik võimalusest küsida laenuandjalt lisainfot ja selgitusi.

and this is how i use the component

<IntlMsg id="offer.submit.confirm.terms" values={{ termsLink, euTermsLink }} shouldFormat />

Can it be that this is happening because it is inside html? formatMessage does parse html in strings in other parts of application. This is the components implementation:

const IntlMessage = ({
  id,
  tagName: TagName = 'span',
  defaultMessage = '',
  description = '',
  shouldFormat = false,
  values = {},
}: Props): ReactNode => {
  const intl = useIntl();
  const msg = defineMessage({
    id,
    defaultMessage,
    description,
  });

  const message = intl.formatMessage(msg, {
    ...values,
    ...t,
    br: <br />,
  });

  const convertedMessage = (m: PrimitiveType): ReactNode =>
    convertMessage({ message: m.toString(), shouldFormat, TagName });

  const renderMessage = (content: typeof message): ReactNode => {
    if (isPrimitive(content)) {
      return convertedMessage(content);
    }
    if (isArray(content)) {
      return content.map((chunk) => (isPrimitive(chunk) ? convertedMessage(chunk) : chunk));
    }
    return content;
  };

  return <TagName key={id}>{renderMessage(message)}</TagName>;
};

Thanks for any help.