title: My markers are not displayed React leaflet
body: <p>The goal is to displayed marker on map.</p>
  <p>I don't understand why my markers are not displayed</p>
  <p>I use react-leaflet</p>
  <p>The response is okay but nothing is displayed</p>
  <p><a href="https://i.stack.imgur.com/hXgH0.png" rel="nofollow noreferrer">Response</a></p>
  <p><a href="https://i.stack.imgur.com/JZ9Gu.jpg" rel="nofollow noreferrer">My map</a></p>
  <p>Import</p>
  <pre><code>import { MapContainer, TileLayer, Marker, ScaleControl } from 'react-leaflet';
  import tileLayer from '../util/tileLayer';
  import L from &quot;leaflet&quot;;
  import 'leaflet-fullscreen/dist/Leaflet.fullscreen.js';
  import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
  import { useEffect } from 'react';
  import newMarker from &quot;../data/asset/pin.png&quot;;
  import axios from 'axios'
  </code></pre>
  <p>center of first view</p>
  <pre><code>const center = [46.227638, 2.213749];
  </code></pre>
  <p>Icon</p>
  <pre><code>const pointerIcon = new L.Icon({
    iconUrl: newMarker,
    iconSize: [50, 58], // size of the icon
    iconAnchor: [20, 58], // changed marker icon position
  });
  </code></pre>
  <p>Markers</p>
  <pre><code>const MyMarkers = ({ data }) =&gt; {
    return data.map(({ lat, lng }, index) =&gt; (
      &lt;Marker
        key={index}
        position={{ lat, lng }}
        icon={pointerIcon}
      &gt;
      &lt;/Marker&gt;
    ));
  }
  </code></pre>
  <p>get data with useEffect, async await &amp; axios</p>
  <pre><code>const MapWrapper = () =&gt; {
  
    useEffect( async () =&gt; {
  
      markers = (await componentDataMarkers()).data
      console.log(markers);
    }, [])
    const componentDataMarkers = async () =&gt; await axios.get(`http://localhost:5000/plane/latlong`)
    var markers = []
  
  </code></pre>
  <p>React Leaflet component</p>
  <pre><code>  return (
      &lt;MapContainer
      fullscreenControl={true}
      center={center}
      zoom={13}
      scrollWheelZoom={true}
      &gt;
  
        &lt;TileLayer {...tileLayer} /&gt;
  
        &lt;MyMarkers data={markers} /&gt;
        &lt;ScaleControl imperial={false} /&gt;
      &lt;/MapContainer&gt;
    )
  }
  
  export default MapWrapper;
  </code></pre>