title: React-Mapbox-GL keeps refreshing on state update
body: <p>I have the following simple React Component using the react-mapbox-gl wrapper. So far, it's great, however I find a small annoyance when trying to update state, using the useState hook.</p>
  
  <pre><code>    function Location(props) {
         const [selectedMarker, setSelectedMarker] = useState(null);
         const [markerBlock, setMarkerBlock] = useState(false)
        const {payload} = useContext(MarkerContext);
        const [latlong, setLatlong] = useState(null);
  
  
        console.log(payload);
  
          const Map = ReactMapboxGl({
              accessToken:
                'tokenHiddenforstackoverflow',
  
            });
  
            const getLatlng = (map, event) =&gt; {
  
                setLatlong(event.lngLat);
            }
  
  
          return (
              &lt;&gt;
      &lt;Map
        style="mapbox://styles/mapbox/satellite-streets-v9"
        containerStyle={{
          height: '100vh',
          width: '100%'
        }}
        onClick={getLatlng}
        center={[18.432723671572944, -33.926210020024826]}
      &gt;
      &lt;ZoomControl /&gt;
  
      &lt;/Map&gt;
  
              &lt;/&gt;
  
          );
      }
  
      export default Location;
  </code></pre>
  
  <p>Whenever I update the LatLong state, the mapbox background turns black and the whole map reloads. Not sure if a coding / structural error or a bug from Mapbox. I tried restructuring this into smaller components as well, but no difference. </p>
  
  <p>Any ideas?</p>