title: Array doesnt fill/map() right React
body: <p>I'm trying to map an array but I think it filled wrong because it gives <code>undefined</code> for the things I added a few things but they come up as <code>undefined</code> for some reasons</p>
  <p><a href="https://i.stack.imgur.com/w2Fic.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w2Fic.png" alt="enter image description here" /></a></p>
  <p>if you look at the top its sort of an separate array in the top and the rest will be <code>undefined</code> if I try to get them with <code>.map()</code></p>
  <p>this picture is from a console log here:</p>
  <pre><code>           {RuuviTag.map((tag) =&gt; (
  
  
  
                &lt;div key={tag.MAC}&gt;
                  {console.log(tag.MAC),
                  console.log(tag)
  
  
                  }
  
                  &lt;Marker position={[tag.Latitude.replace(/,/g, '.'), tag.Longitude.replace(/,/g, '.')]} icon={new Icon({
                     iconUrl: tag.colorIcon,
                      iconSize: [25, 41],
                       iconAnchor: [12, 41] })} &gt;
                    &lt;Popup&gt;
                      &lt;h1&gt;{tag.MAC}
                         &lt;/h1&gt;
                         &lt;h1&gt;
                         &lt;/h1&gt;
                    &lt;/Popup&gt;
                  &lt;/Marker&gt;
  
  
  
  
  
                &lt;/div&gt;
              ))}\
  
  </code></pre>
  <p>this is the code where I fill the array:</p>
  <pre><code> async function getData() {
      setLoading(true);
  
      ref.onSnapshot((querySnapshot) =&gt; {
        let items = [];
  
        querySnapshot.forEach((doc) =&gt; {
         
          let item = doc.data()
          console.log(doc.data().RawData)
          PostRawData(doc.data().RawData).then(function (result) {
            console.log(result)
            item.decryptedData = result.data;
          });
  
          checkBoundaries(doc.data().RawData).then(function (result) {
            console.log(result)
            item.colorIcon = result;
          });
          console.log(item)
  
          items.push(item);
          console.log(items)
  
        });
  </code></pre>
  <p>but when I try to map the colorIcon or something from the decrypted data it comeds up as <code>undefined</code></p>
  <p>Does anyone know how to fix this? I couldn't find this issue anywhere</p>