Using i18next-chained-backend to load resources from api and using local data as fallback.But translation key is shown in the application not value

Question

Using i18next-chained-backend to load resources from backend and using local data as fallback. But before api respond, translation key is shown in the application.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import ChainedBackend from 'i18next-chained-backend';
import HttpBackend from 'i18next-http-backend';
import resourcesToBackend from 'i18next-resources-to-backend';
import { format } from 'date-fns';
import ...

const resources = {
  'en-US': {
    productDetails: productDetailsEN,
    brands: brandsEn,
    productDetailsA: productDetailsAEN,
    productDetailsB: productDetailsBEN,
    order: orderMessagesEN,
    shop: enUS,
  },
  'es-US': {
    order: orderMessagesES,
    brands: brandsES,
    shop: esUS,
    productDetails: productDetailsES,
    productDetailsA: productDetailsAES,
    productDetailsB: productDetailsBES,
  },
  'fr-CA': {
    order: orderMessagesFR,
    shop: frCA,
  },
};

const detectionOptions = {
  order: ['cookie', 'localStorage', 'navigator', 'querystring', 'path'],
  lookupCookie: 'i18next',
  lookupLocalStorage: 'i18nextLng',
};

i18n
  .use(ChainedBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // resources,
    fallbackLng: 'en-US',
    supportedLngs: ['en-US', 'de', 'fr-CA', 'es-US'],
    debug: !process.env.NODE_ENV || process.env.NODE_ENV === 'development',
    detection: detectionOptions,
    interpolation: {
      escapeValue: false,
      format: (value, formatting) => format(value, formatting),
    },
    ns: ['productDetails', 'productDetailsA', 'productDetailsB', 'brands', 'order', 'shop'],
    backend: {
      backends: [HttpBackend, resourcesToBackend(resources)],
      backendOptions: [
        {
          // loadPath: `${SERVICE_URL}/api/v1/localisation/download-translation/{{lng}}/{{ns}}`,
          loadPath: `${SERVICE_URL}/api/v1/localisation/download-translation-locale?locale={{lng}}&namespace={{ns}}`,
          crossDomain: false,
          allowMultiLoading: false,
        },
      ],
    },
  });

export default i18n;

What should I do to resolve this issue.

I am expecting the values to be shown in the application instead of the translation keys.

Things that I have tried:

1. tried using addResources(), addResourceBundle(), etc. while using these methods, my application logsout automatically.
2. Tried hitting the api first and then when it returns the response, I tried to initialize the i18next instance. But it throwed some unexpected error.