title: Mapbox GL Js, dynamically changing map container size, can not resize map
body: <p>My map instance lives in a resizable container, and when I change size I should call map.resize(). I was wondering is there a way to listen to mapbox container resize event so it can trigger map.resize() ? Can you advise how to do it?</p>
  <pre><code>export default function Map({ chartID, configuration, data }) {
    const classes = useStyles();
    const mapContainer = useRef(null);
  
    const [map, setMap] = useState(null);
  
    const [settings, setSettings] = useState({
      longitude: -73.935242,
      latitude: 40.73061,
      zoom: 9,
    });
  
    useEffect(() =&gt; {
      const geoFeatures = //...getting data
  
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox://',
        center: [settings.longitude, settings.latitude],
        zoom: settings.zoom,
      });
  
      map.on('move', () =&gt; {...});
  
      //setting map to state if we need to reference it later
      setMap(map);
      // Clean up on unmount
      return () =&gt; map.remove();
    }, []);
  
    return (
      &lt;div className={classes.mapWrapper}&gt;
        &lt;div ref={mapContainer} className={classes.map} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>