title: Can't read the multiple lang file in React Intl + TypeScript
body: <p>I would like to use <code>react intl</code> to support multiple languages. I'm sure I have the file set up, but it doesn't load properly and doesn't show the text I have set up in yaml.</p>
  <p>I'm getting an error message stating that loading is failing. What is wrong?</p>
  <p>The error:</p>
  <blockquote>
  <p>Error: [@formatjs/intl Error MISSING_TRANSLATION] Missing message: &quot;Top.Title&quot; for locale &quot;en-US&quot;, using id as fallback.</p>
  </blockquote>
  <p><em>index.tsx</em></p>
  <pre><code>import { IntlProvider } from 'react-intl'
  import { chooseLocale } from './locales'
  
  const lang = navigator.language
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;IntlProvider locale={lang} messages={chooseLocale(lang)}&gt;
        &lt;App /&gt;
      &lt;/IntlProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root'),
  )
  </code></pre>
  <p><em>locales/index.ts</em></p>
  <pre><code>import yaml from 'js-yaml'
  
  const en = yaml.load(`
  Top:
    Title: Sample Title
    Message: Hello! { name }!
  `)
  
  const translationMessages = {
    en,
  }
  
  export const chooseLocale = (locale: string) =&gt; {
    console.log('Your locale :', locale)
    switch (locale) {
      case 'en-GB':
        return translationMessages.en
      default:
        return translationMessages.en
    }
  }
  </code></pre>
  <p><em>hello.js</em></p>
  <pre><code>import { FormattedMessage } from 'react-intl'
  
  &lt;FormattedMessage id=&quot;Top.Title&quot; /&gt;
  </code></pre>