Renders black screen after multiple renders.

[MarkLyck]

I have an application that can display 2 maps on the same page.

The first map always loads without any issues (mostly).

However when you open a popup with a second map, it works the first time you open one, but if you close it and open it again it displays a back screen instead.

Works the first time

Always breaks the second time and any time after that.

I can't see that I'm doing anything wrong with my setup or rendering? I also checked why-did-you-render and I have no unnecesarry re-renders happening on this component.

import * as mapboxgl from 'mapbox-gl'
import ReactMapboxGl, { ZoomControl, Cluster, Marker } from 'react-mapbox-gl'

Object.getOwnPropertyDescriptor(mapboxgl, 'accessToken')?.set(
  'MY_TOKEN'
)
const MapBox = ReactMapboxGl({
  scrollZoom: false,
})

const BROWSER_HAS_WEBGL = !!window.WebGLRenderingContext

export const MapView = ({
  data = [],
  onMarkerClick = () => {},
  isLoading,
  hasZoom = true,
  defaultZoom = 3,
  defaultBounds,
  width,
  TooltipContent,
}: MapProps) => {
  const theme = useTheme()
  const [hasMapMounted, setMapMounted] = useState(false)
  const [bounds, setBounds] = useState<undefined | BoundsType>(defaultBounds)
  const [zoom] = useSessionStorageState<[number]>('zoom', {
    defaultValue: [defaultZoom],
  })

  const [center, setCenter] = useSessionStorageState<[number, number]>(
    'map-center',
    { defaultValue: [-106.3468, 56.1304] }
  )

  if (!APP_CONFIG.IS_MOCKED_ENV && BROWSER_HAS_WEBGL === false)
    return <WebGLError />

  return (
      <MapBox
        className="chromatic-ignore"
        style={`mapbox://styles/mapbox/${theme.type}-v10`}
        fitBoundsOptions={
          data.length ? { padding: 200, maxZoom: 16 } : undefined
        }
        fitBounds={bounds}
        center={center}
        containerStyle={{
          opacity: /* c8 ignore next */ hasMapMounted ? 1 : 0,
          height: '100%',
          width: '100%',
        }}
        trackResize={false}
        onStyleLoad={(map) => {
            map?.resize?.()
            setMapMounted(true)
          }
        }
        zoom={zoom}
      >
        <>
              <Cluster
                ClusterMarkerFactory={ClusterMarker}
                zoomOnClick={true}
                zoomOnClickPadding={80}
                radius={100}
              >
                {data.map((point: any) => (
                  <Marker
                    coordinates={[point.lon, point.lat]}
                    anchor="bottom"
                    key={point.id}
                  >
                    <MarkerItem
                      point={point}
                      renderPoint={onMarkerClick}
                      setCenter={setCenter}
                      selectedId={undefined}
                    />
                  </Marker>
                ))}
              </Cluster>
        </>
      </MapBox>
  )
}

Why am I getting a black screen?

Looking at the html the canvas does not render at all after a second component is rendered.

Versions: "react-mapbox-gl": "5.1.1", "mapbox-gl": "2.8.2",

[hasnain-GTS]

Any solution ?