react-i18next: Interpolation with trans creates missing file even when the literal is in location files.

🐛 Bug Report

Every time I launch the server i18n generates a new missing file(because I delete the previous one) even when I put the translation in the respective file:

This means every time I pass to a different language the literal is not translated:

To Reproduce

I created my component with the next code:

const Layout = ({ preview, children }) => {
  const { t } = useTranslation()
  return (
    <>
      <Container
        component="main"
        maxWidth="md"
        style={{ marginTop: 100, marginBottom: 100 }}
      >
        {preview ? (
          <Alert
            severity="warning"
            action={
              <Button color="inherit" size="small" href="/api/exit-preview">
                {t("exit")}
              </Button>
            }
            style={{ marginBottom: 20 }}
          >
            <AlertTitle>{t("alert.preview-mode.title")}</AlertTitle>
            <Trans i18nKey="alert.preview-mode.message">
              You are looking the website in — <strong>preview mode</strong>.
            </Trans>
          </Alert>
        ) : null}
        {children}
      </Container>
    </>
  )
}

Each time I launch the application(yarn dev), it creates a new missing file for the same line in all idioms but English(the main one).

Expected behavior

It must be corrected translate to Spanish or another language:

"message": "Está viendo el sitio en — <strong>modo previsualización</strong>.",

Your Environment

• runtime version: node v14.12.0.
• i18next version: i.e. ^19.6.3
• os: Manjaro Linux.