title: Unable to populate option elements to select element using array.map()
body: <p>I'm getting an array of vehicle makes from an api, and trying to map each item in the array to an option element within a select element:</p>
  <pre><code>  const Makes = () =&gt; {   
      return (
        &lt;select aria-label=&quot;Select a make&quot;&gt;
          {/* Populate with option elements based on the years state and its index */}
          &lt;option value=&quot;&quot;&gt;Select a make&lt;/option&gt;
          {makes.map((make) =&gt; &lt;option key={make.toString()} value={make}&gt;test&lt;/option&gt;)}
        &lt;/select&gt;
      );
    };
  </code></pre>
  <p><code>makes</code> is defined in the upper scope as an empty array, and I'm filling the array with a <code>fetchMakesByYear</code> function that looks like this:</p>
  <pre><code>  const fetchMakesByYear = async () =&gt; {
      const url = `https://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year=${year}`;
  
      const headers = {
        headers: {
          'Content-Type': 'application/xml',
          Accept: 'application/xml',
        },
      };
  
      try {
        const data = await fetch(url, headers);
        const itemUnformatted = await data.text();
        const makesByYearUnformatted = convert.xml2js(itemUnformatted, { compact: true, spaces: 2 });
        const makesByYear = makesByYearUnformatted.menuItems.menuItem;
  
        for (let i = 0; i &lt; makesByYear.length; i += 1) {
          makes.push(makesByYear[i].text._text);
        }
      } catch (err) {
        console.log(err);
      }
    };
  
    useEffect(() =&gt; {
      fetchMakesByYear();
    });
  </code></pre>
  <p>Not sure why the options are not being populated. Any ideas on what I'm doing wrong here? Thanks.</p>