title: react leaflet not showing updated state
body: <p>I am fetching data from my device storage and want to display the data on a map. But when I update my state object <code>this.coords.path</code> inside my function <code>showPics()</code> only the testing marker at <code>{lat:1,lng:1}</code> is displayed all the other coordinates are pushed to <code>this.coords.path</code> but not displayed...</p>
  <p>I have tried it with the <code>sampleData</code>-array for testing the basic code -&gt; the loop and everything works - just not when updating the state object with new data...</p>
  <p>Here is the code:</p>
  <pre><code>class Map extends React.Component {
  
      constructor(props) {
        super(props);
        this.coords = {
          path: [
              {lat:1, lng:1}
          ]
        }
      }      
    
      showPics = async() =&gt; {
  
          let {value} = await Storage.get({key: 'path' })
          let arrayPath = JSON.parse(value)
  
          for( let i=0; i &lt; arrayPath.length; i++) {
  
              let newArray = {lat: arrayPath[i].latitude, lng: arrayPath[i].longitude}
              this.coords.path.push(newArray)
  
          }
  
      }
    
      render() {
    
        const sampleData = [{
          &quot;Id&quot;: 1,
          &quot;lat&quot;: 54.083336,
          &quot;lng: 12.108811
        },
        {
          &quot;Id&quot;: 2,
          &quot;lat&quot;: 54.084336,
          &quot;lng&quot;: 12.109811
        }]
        
        return (
          &lt;div className=&quot;leaflet-container&quot;&gt;
            &lt;MapContainer id=&quot;map&quot; center={center} zoom={zoom} scrollWheelZoom={false}&gt;          
              &lt;TileLayer
                attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
                url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
              /&gt;
    
              { this.coords.path.map(eachData =&gt; (
             &lt;Marker
               position= {[eachData.lat, eachData.lng]}
             /&gt;
           ))}
  
            &lt;IonFab vertical=&quot;bottom&quot; horizontal=&quot;end&quot; slot=&quot;fixed&quot;&gt;
              &lt;IonFabButton onClick={() =&gt; this.showPics()}&gt;
                &lt;IonIcon icon={image}&gt;&lt;/IonIcon&gt;
              &lt;/IonFabButton&gt;
            &lt;/IonFab&gt;
          &lt;/div&gt;
        )
    
      }
    }
  </code></pre>