React i18 not showing nested translations

Question

I can't manage to show nested properties in my application from translation configuration in React application with useTranslation. This is my i18 configuration:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// Config
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        NESTING_PARENT: {
          CHILD: 'Some text'
        }
      },
    },
  },
  lng: "en",
  debug: false,
  keySeparator: false,
  interpolation: {
    escapeValue: false,
    formatSeparator: ",",
  },
  react: {
    useSuspense: false,
  },
});

// Component
function MyComponent() {
  const { t } = useTranslation("translations", { keyPrefix: "NESTING_PARENT" });
  return <div>{t("CHILD")}</div>;
}

Output is:

NESTING_PARENT.CHILD

Answer 1

It turns out that config keySeparator: false turns off nesting overall. Even if i don't translate with NESTING_PARENT.CHILD.

This is misleading as the keySeparator property is used to define key separator character (default is .).

Removing keySeparator form the config fixed my issue.

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// Config
i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        NESTING_PARENT: {
          CHILD: 'Some text'
        }
      },
    },
  },
  lng: "en",
  debug: false,
  // keySeparator: false, <------ Remove it
  interpolation: {
    escapeValue: false,
    formatSeparator: ",",
  },
  react: {
    useSuspense: false,
  },
});

// Component
function MyComponent() {
  const { t } = useTranslation("translations", { keyPrefix: "NESTING_PARENT" });
  return <div>{t("CHILD")}</div>;
}

Output is now:

Some text