i18next react load namespaces only when needed

I have the following code that loads i18n translations. The l.json file exists only in a few pages but it is loaded always (based on the http requests that I see from the browser). How can I prevent it so that these are loaded only when needed?

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';
i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .use(ChainedBackend)
  .init({
    debug: true,
    fallbackLng: "en-US",
    supportedLngs: ['en-US', 'en-GB'],
    ns: ['l', 't'],
    defaultNS: 't',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    backend: {
      backends: [
        HttpBackend,
      ],
      backendOptions: [
        {
          loadPath: 'https://example.com/{{lng}}/{{ns}}.json'
        }
    ]
    }
  });