title: Why is react i18next not working ? no errors
body: <p>The translations do not work I only see the keys. Instead of having &quot;Welcome to MySite&quot; I only have &quot;welcome.title MySite&quot;.</p>
  <p>my <strong>i18nextConf.js</strong> file</p>
  <pre><code>import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  import Backend from 'i18next-xhr-backend';
  import LanguageDetector from 'i18next-browser-languagedetector';
  
  const fallbackLng = ['fr'];
  const availableLanguages = ['en','fr'];
  
  i18n
      .use(Backend) // load translations using http (default public/assets/locals/en/translations)
      .use(LanguageDetector) // detect user language
      .use(initReactI18next) // pass the i18n instance to react-i18next.
      .init({
          fallbackLng, // fallback language is english.
          backend: {
              /* translation file path */
              // loadPath: './translations/{{lng}}/{{ns}}.json'
              loadPath: './translations/{{lng}}/common.json'
          },
  
          detection: {
              checkWhitelist: true, // options for language detection
          },
  
          debug: false,
  
          whitelist: availableLanguages,
  
          interpolation: {
              escapeValue: false, // no need for react. it escapes by default
          },
      });
  
  export default i18n;
  </code></pre>
  <p>My <strong>index.js</strong> file</p>
  <pre><code>import React,{ Suspense } from 'react';
  import './i18nextConf';
  
  // code omitted
  
  ReactDOM.render(
      &lt;React.StrictMode&gt;
          &lt;Provider store={store}&gt;
              &lt;Suspense fallback={null}&gt;
                  &lt;App /&gt;
              &lt;/Suspense&gt;
          &lt;/Provider&gt;
      &lt;/React.StrictMode&gt;,
      document.getElementById('root')
  );
  </code></pre>
  <p>My translations files in <strong>src/translations/en/common.json</strong> and <strong>src/translations/fr/common.json</strong></p>
  <pre><code>{
      &quot;welcome&quot;: {
          &quot;title&quot;: &quot;Welcome to &quot;
      }
  }
  </code></pre>
  <p>my <strong>CustomComponent.js</strong></p>
  <pre><code>import React,{ Component } from 'react';
  import { withTranslation } from &quot;react-i18next&quot;;
  class CustomComponent extends Component {
      render() {
          const { t } = this.props;
  
          return (
              &lt;div className=&quot;section-title&quot;&gt;
                  &lt;h2 className={classes.myTitle}&gt;{t('welcome.title')}&lt;/h2&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default withTranslation()(CustomComponent);
  </code></pre>
  <p>Is there something wrong with my configuration ? What do I have to change ?</p>