issue with next-i18next Setup in Multi-Tenant App

[yaman3bd]

hi, I am working on a Multi-Tenant App, and the content of the tenant is served based on the host, so the host is set as a header in each request sent to the API:

const result = await axios({
  url,
  headers: {
    ...headers,
    //passing the tenant host as a header
    "X-Tenant-Domain": appState.tenantHost
  },
  method,
  data,
  params
});

and I am having an issue with how should I set next-i18nextup.
I have made the general setup, like setting up next-i18next config, wrapping the app in appWithTranslation, and using serverSideTranslations. but the issue is when too many requests are sent at the time to the server, it does not set the headers at all and the requests are sent from the client, not the server.
here is what my setup looks like:
_app.tsx:

import { appWithTranslation } from 'next-i18next'
import i18nextConfig from "@/next-i18next.config.js";

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp, i18nextConfig)

in each page's getServerSideProps:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import i18nextConfig from "@/next-i18next.config.js";

export const getServerSideProps = async ({ locale, req }) => {
  const host = req.headers.host;

  //HERE set the custom header for the backend, to the i18next instance
  i18nextConfig.backend.backendOption.customHeaders = {
    "X-Tenant-Domain": host
  };

  return {
    props: {
      ...(await serverSideTranslations(locale, ["common", "footer"], i18nextConfig))
    }
  };
};

next-i18next.config.js:

const HttpBackend = require("i18next-http-backend/cjs");
const MultiLoadBackendAdapter = require("i18next-multiload-backend-adapter/cjs");
const { axios } = require("./lib/axios");

const env = process.env.NODE_ENV;

module.exports = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar"
  },
  ns: [...],
  defaultNS: "common",
  maxParallelReads: 30,
  serializeConfig: false,
  reloadOnPrerender: env === "development",
  use: [MultiLoadBackendAdapter],
  backend: {
    backend: HttpBackend,
    backendOption: {
      loadPath: "{{lng}}|{{ns}}",
      customHeaders: {},
      request: async (options, url, payload, callback) => {
        try {
          const [lng, ns] = url.split("|");

          await axios
            .get("/translations", {
              params: { group: ns.split("+") },
              //passing the tenant host as a header, and here sometimes the headers are empty
              headers: options.customHeaders
            })
            .then((response) => {
              callback(null, {
                data: response.data.data,
                status: 200
              });
            })
            .catch((error) => {
              callback(null, {
                status: 500
              });
            });
        } catch (e) {
          callback(null, {
            status: 500
          });
        }
      }
    }
  }
};

and IDK why in some cases the translations are fetched from the client, not the server, and I could not set the headers because I do not have the correct i18nextConfig instance to attach the headers to it.
can anyone help me with this issue to find out what is happening here? I really searched all over Google and made lots of logs and debugging and I could not anything to help resolve the issue.