fitbounds.js

  onMoveEnd = (event) => {
    const map = this._mapRef.current.getMap();
    map.off('moveend', this.onMoveEnd);

    const zoom = map.getZoom();
    const { lat, lng } = map.getCenter();
    const viewport = { longitude: lng, latitude: lat, zoom };
    this.props.onViewportChange(viewport);
  };

  componentDidUpdate(prevProps) {
    const { bounds } = this.props;

    if (bounds !== prevProps.bounds && bounds !== null) {
      const map = this._mapRef.current.getMap();
      map.fitBounds(bounds, {
        padding: { top: 100, bottom: 380, left: 50, right: 50 }
      });

      map.on('moveend', this.onMoveEnd);
    }
  }