How to load translations from a custom Node.js server api?

[seyaobey-dev]

I would like to use i18next-http-backend to load my translations from a custom Node.js server which returns a key-value pairjson. This json does not come from a static file (on the server) but from a database. This is the json:

{
   hello_world: "hello world!"
}

I'm using the property request of the backend options to call my custom backend server:

const backendOptions = {
  request: (options, url, payload, callback) => {
       const json = await `[fetch from custom backend]`
       callback(null, {
           status: 200,
           data: json // ==> { "hello_world": "hello world!" }
       });
   }
}
...
i18next
  .use(backend)
  .use(initReactI18next)
  .init({
     resources: {
        en: {
           t: { some_translation: "Some text" }
        }
     },
     ns: ["en"],
     defaultNS: "t",
     fallbackLng: "en",
     compatibilityJSON: "v3",
     backend: backendOptions,
     partialBundledLanguages: true,
     lng: "en",
     interpolation: {
         escapeValue: false,
     } ,
     react: {
         useSuspense: false,
     }
     ... 
  }, () => {
      // set a global flag "translationReady = true" so App can start rendering
  })

Then in my react application, in the component HelloWord, I attempt to apply the translation, but it is not working: it just showing the key hello_world instead of the text value. Here is my component:

import { t } from "i18next";

export const HelloWorld = () =>  (
  <Text>{t("hello_world"}</Text>
)

My question is: given my scenario, how should I merge the json object returned from the server into my translation resources (or namespace?...) so that the keys are available when and where they're used?