I was reading value for translation from file stored in public folder of react application. file were stored in

but since our data can be changed anytime so we are storing data into database. at loadtime after detecting the language from browser data of that langauge will be called from API and will be used directly. so below file code is working perfectly.

import i18next from 'i18next';

const LanguageDetector =  require("i18next-browser-languagedetector");
const initReactI18next = require("react-i18next");

import { TRANSLATIONS_EN } from "../public/locales/en/en.js";
import { TRANSLATIONS_IT } from "../public/locales/it/it.js";


i18next
  .use(LanguageDetector)
  .use(initReactI18next)
 .init({
  
   resources: {   
     en:TRANSLATIONS_EN,   
     it:TRANSLATIONS_IT,
   },
   fallbackLng: 'fr'
 }); 

 
i18next.changeLanguage(navigator.language);

export default i18next;

now instead of this I am using below code in which I am calling API to read the data and it will be assigned directly to variable. we wont write data to file in below code instead of static files I have called API. if I print output of API or file they are exactly same. but not able to understand why this is not working. can asynchronous be the reason?

  import i18next from 'i18next';
    import React from 'react';
    import TransFile from './TransFile.js';
    import apiDelegate from '../src/components/Utils/Common/api.js';
    
    const LanguageDetector = require('i18next-browser-languagedetector');
    const initReactI18next = require('react-i18next');
    

    import { TRANSLATIONS_EN } from '../public/locales/en/en.js'; //just for verification

    import makeGetRequest from './abc.js';
    apiDelegate.getTranslations().then((result) => {
     output = JSON.stringify(result);
     const tr_en = 'translation: ' +JSON.parse(output) ;
      alert(tr_en);  //this and below alert produce same result.
      alert(TRANSLATIONS_EN));
    
      i18next
        .use(LanguageDetector)
        .use(initReactI18next)
        .init({
          resources: {
            en: tr_en,   //if I write TRANSLATIONS_EN here it works
       },
          fallbackLng: 'fr',
        });
    
    
      i18next.changeLanguage(navigator.language);
    });
    export default i18next;

not able to understand strange issue. is there any better way to handle? I found i18n-http-backend api but from this I dont know how to call restAPI. Please help.