title: i18n using keys as object keys instead of string
body: <p>I have a translations constant that holds all the keys, that way I can access the translations by typing the key so it avoids mistakes.</p>
  <p>however I am experiencing an issue whenever I am using the translations imported from that Translations file.</p>
  <p><code>i18next::translator: missingKey en-US translations Phone Phone</code></p>
  <p>my i18n file looks like:</p>
  <pre><code>import i18n from 'i18next'
  import LanguageDetector from 'i18next-browser-languagedetector'
  import moment from 'moment'
  
  import {TRANSLATION} from './translations'
  
  i18n.use(LanguageDetector).init({
    // we init with resources
    resources: {
      en: {
        translations: TRANSLATION.EN,
      },
    },
    fallbackLng: 'en-US',
    debug: process.env.NODE_ENV === 'development',
  
    // have a common namespace used around the full app
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false, // we use content as keys
    interpolation: {
      escapeValue: false, // not needed for react!!
      formatSeparator: ',',
      format: function(value, formatting, lng) {
        if (value instanceof Date) return moment(value).format(formatting)
        return value.toString()
      },
    },
    react: {
      wait: true,
    },
  })
  
  export default i18n
  </code></pre>
  <p>the file  with the keys that I am using on the form</p>
  <pre><code>export const TRANSLATION = {
  
    EN:{
      phone: 'Phone',
    }
  }
  </code></pre>
  <p>the component where I am using the Keys:</p>
  <pre><code>import i18n, {T_KEYS} from '@/services/i18n'
  
  const Component=()=&gt;{
  return(
     &lt;Form.Item
              name=&quot;phone&quot;
              label={i18n.t(T_KEYS.phone)}
              rules={rules.phone}
            &gt;
              &lt;Input /&gt;
            &lt;/Form.Item&gt;
  
  )
  </code></pre>
  <p>I believe that for some reason the component is being rendered before the translations keys have accessed, so the Keys are missing and the message is displayed but I am not 100% sure, I tried adding <code>Object.keys(TRANSLATIONS.EN)</code> &amp;&amp; before <code>i18n.use(LanguageDetector).init({</code>, but it des not seem to solve the situation, I was wondering if anyone had a similar issue or idea since after browsing through documentation and repository I couldn't find any answer to what is happening.</p>
  <p>thanks in advance</p>