React-i18n showing json property labels before rendering and after rendering the translation

Question

I have attached my code here, When I add a new translation key, refresh page labels are still visible, and the translation text is not showing. How to resolve I am using libraries,

This is the i18n.js file

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import getDebugger from './getDebugger';

const debug = getDebugger('utils:i18n');

const i18nOptions = {
  detection: {
    order: ['navigator'],
  },

  backend: {
    loadPath: `/power/locales/{{lng}}/{{ns}}.json`,
    allowMultiLoading: true,
  },

  // If you create a new translation file (e.g. locales/en/my-translation.json),
  // you’ll need to add its name — without the `.json` — to this array.
  //
  // To use translations that aren’t in the default (translation.json)
  // translations, you need to add the namespace before the translation key:
  //
  //     t('my-translation:key')
  //
  // See https://www.i18next.com/principles/namespaces.html for details.
  ns: ['translation'],
  fallbackLng: (code) => {
    let fallback;
    if (code.includes('de')) fallback = ['de', 'en'];
    else if (code.includes('en')) fallback = ['en'];
    else if (code.includes('es')) fallback = ['es', 'en'];
    else if (code.includes('fr')) fallback = ['fr', 'en'];
    else if (code.includes('it')) fallback = ['it', 'en'];
    else if (code.includes('ja')) fallback = ['ja', 'en'];
    else if (code.includes('ko')) fallback = ['ko', 'en'];
    else if (code.includes('pt')) fallback = ['pt-br', 'en'];
    else if (code.includes('zh-cn')) fallback = ['zh-cn', 'zh', 'en'];
    else if (code.includes('zh-tw')) fallback = ['zh-tw', 'zh', 'en'];
    else if (code.includes('zh')) fallback = ['zh', 'en'];
    else fallback = 'en';
    return fallback;
  },
  lowerCaseLng: true,
  load: 'all',
  debug: true,
};

i18n.use(Backend).use(LanguageDetector).init(i18nOptions);

debug('i18n settings:');
debug(i18n);

export default i18n;

I am using the below lines in any file Network.js

import { useTranslation } from 'react-i18next';

const Network = ()=>{
const [t] = useTranslation();
return (
<div> 
{t('overview.data_center_readiness.network.networking')} {t('overview.data_center_readiness.network.main_title_new')}
</div>
)
}
export default Network

Showing like attached screenshot here