title: React JS rendering wrong Lists and Keys
body: <p>Hi please I am stuck I have this code but it renders only numbers like the image below. What am I doing wrong. </p>
  
  <pre><code>       import useStats from '../utils/useStats';
  
  export default function CountrySelector() {
      const countries = useStats('https://covid19.mathdro.id/api/countries');
      console.log(countries);
      if (!countries) return &lt;p&gt;Loading...&lt;/p&gt;
      return (
          &lt;div&gt;
              &lt;select&gt;
                  {Object.entries(countries.countries).map(([country, code]) =&gt; (
                      &lt;option key={code} value={code}&gt;
                          {country}
                      &lt;/option&gt;
                  ))}
              &lt;/select&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>This is what it outputs it need to list the country names.</p>
  
  <p><a href="https://i.stack.imgur.com/1HlV9m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1HlV9m.png" alt="enter image description here"></a></p>