title: unable to update state using react useState
body: <p>I am learning react <code>hooks</code>. In my code I have set the initial values  for plotting map as</p>
  
  <pre><code>//map state
  const [mapData, setMapData] = useState(
      { lat: 40.712776, lng: -74.0059, zoom: 5 }
  );
  </code></pre>
  
  <p>In the <code>useEffect()</code> call back I am loading the map once</p>
  
  <pre><code>useEffect(() =&gt; {
      initMap();
  }, []); // run once
  </code></pre>
  
  <p>Inside the <code>initMap()</code> there is <code>map.on()</code> method to get the updated geo locations. The <code>initMap()</code> is </p>
  
  <pre><code>const initMap = () =&gt; {
      mapboxgl.accessToken = 'token';
      const map = new mapboxgl.Map({
          container: mapContainer,
          style: 'mapbox://styles/mapbox/streets-v11',
          center: [mapData.lng, mapData.lat],
          zoom: mapData.zoom
      }); // load the map with init values
  
      // update the `mapData` as map move
      map.on('moveend', () =&gt; {
          const { lng, lat } = map.getCenter(); // logs the updated lat and lon
          setMapData({ lat: lat.toFixed(4), lng: lng.toFixed(4), zoom: map.getZoom().toFixed(2) }); // suppose to set the updated value
          console.log(mapData); // not logging updated values!
      });
  }
  </code></pre>
  
  <p>The <code>setMapData()</code> is not setting the state. But the <code>map.on</code> is called and is logging the values.</p>