How do I set a bounds-based initialViewState with a controlled <Map> component without an initial render flicker?

[blakeley]

With an uncontrolled component, I can specify a bounds-based initialViewState like this:

<Map 
  initialViewState={{
    bounds: [minLng, minLat, maxLng, maxLat],
    fitBoundsOptions: { padding: 32 },
  }}
/>

But a controlled component does not have similar such bound constraints, and so instead, my only options seem to involve some imperative hook with the fitBounds viewport method, like this:

    <ReactMapGL
      latitude={latitude}
      longitude={longitude}
      zoom={zoom}
      onLoad={(event) => {
        const { offsetWidth: width, offsetHeight: height } = event.target.getContainer()
        const viewport = new WebMercatorViewport({ width, height })
        const { longitude, latitude, zoom } = viewport.fitBounds(
          [
            [minLat, minLng],
            [maxLat, maxLng],
          ],
          {
            padding: 32,
          }
        )
        setLatitude(latitude)
        setLongitude(longitude)
        setZoom(zoom)
      }}

This sorta works, but it has the downside of an initial render flicker -- the map first loads at the values initially specified for latitude, longitude, and zoom, and then rerenders after this initial load per fitBounds. The uncontrolled component does not suffer this initial render flicker -- is it possible to specify a bounds-based initial view state with a controlled component without this initial render flicker?

[Pessimistress]

Move your fitBounds code outside of onLoad and pass the longitude, latitude and zoom directly to the map.