HTML标签显示为文本，在i18n翻译中。我该如何修复它？并且'deviceLimit'属性也没有显示。
tsx文件：

const DeviceLimitTooltip: FunctionComponent<Props> = (props) => {
  const { classes, deviceLimit, isDeviceLimitReached, children, style } = props;
  const [t] = useTranslation();

  if (isDeviceLimitReached) {
    return (
      <Tooltip
        title={
          <React.Fragment>            
            {t("devices.freePlan.lastDevice", {deviceLimit: deviceLimit})}            
            <Link color={'secondary'} href={SUPPORT_CONTACT_US} target={'_blank'}>
              {t('devices.freePlan.contactUs')}
            </Link>
          </React.Fragment>
        }
        placement="top"
        interactive
        classes={{ popper: classes.popper, tooltip: classes.tooltip }}
      >
        <span style={style}>{children}</span>
      </Tooltip>
    );
  }

  return <React.Fragment>{children}</React.Fragment>;
};

translation.json:

"freePlan": {      
      "lastDevice": "You've reached <strong>your limit of {{deviceLimit}} devices</strong> under the current free plan. To add more devices, please, ",
      "contactUs": "contact us."     
    }

这是它现在样子屏幕截图