StreetViewPanorama component does not erase the previous WebGL contexts when it re-renders

[alamenai]

Reproduction Steps

https://jam.dev/c/12719566-6628-4a3c-ae0e-6aabceae2552

I have a component that controls the visibility of 2 components:

const Controller = ()=>{

// some states
// Switch component that changes the showViews state

{showViews ? (
        <div className='flex flex-1 h-full gap-4 overflow-hidden z-50'>
          <div className='flex-1 h-full w-full'>
            <GoogleStreetView viewMode='street' />
          </div>
          <div className='flex-1 h-full w-full'>
            <ImmersiveView viewMode='immersive' />
          </div>
        </div>
      ) : null}
}

The GoogleStreetView component is implemented like this:

import { defaultLocation } from "@/features/viewer/components"
import { cn } from "@/lib/utils"
import { GoogleMap, StreetViewPanorama } from "@react-google-maps/api"
import { parseAsFloat, useQueryState } from "nuqs"

import { ViewProps } from "./google-view-card"

export const GoogleStreetView = ({ viewMode, options }: ViewProps) => {
  const [lng] = useQueryState("lng", parseAsFloat.withDefault(defaultLocation[0]))
  const [lat] = useQueryState("lat", parseAsFloat.withDefault(defaultLocation[1]))

  return (
    <GoogleMap
      mapContainerClassName={cn("flex-1 w-full h-full rounded-2xl", viewMode === "split" ? "min-h-0" : "min-h-[680px]")}
      center={{ lat, lng }}
      options={{
        ...options,
        tilt: 0,
        mapTypeId: "roadmap",
        zoom: 10,
        fullscreenControl: viewMode !== "split",
        zoomControl: viewMode !== "split",
        cameraControl: true,
      }}
    >
      <StreetViewPanorama
        options={{
          addressControl: false,
          fullscreenControl: viewMode !== "split",
          zoomControl: viewMode !== "split",
          position: { lat, lng },
          visible: true,
          motionTracking: false,
          motionTrackingControl: false,
        }}
      />
    </GoogleMap>
  )
}

As you have seen in the shared demo, this component introduces the issue:

     <StreetViewPanorama
        options={{
          addressControl: false,
          fullscreenControl: viewMode !== "split",
          zoomControl: viewMode !== "split",
          position: { lat, lng },
          visible: true,
          motionTracking: false,
          motionTrackingControl: false,
        }}
      />

When I remove it , the issue disappear:

import { defaultLocation } from "@/features/viewer/components"
import { cn } from "@/lib/utils"
import { GoogleMap, StreetViewPanorama } from "@react-google-maps/api"
import { parseAsFloat, useQueryState } from "nuqs"

import { ViewProps } from "./google-view-card"

export const GoogleStreetView = ({ viewMode, options }: ViewProps) => {
  const [lng] = useQueryState("lng", parseAsFloat.withDefault(defaultLocation[0]))
  const [lat] = useQueryState("lat", parseAsFloat.withDefault(defaultLocation[1]))

  return (
    <GoogleMap
      mapContainerClassName={cn("flex-1 w-full h-full rounded-2xl", viewMode === "split" ? "min-h-0" : "min-h-[680px]")}
      center={{ lat, lng }}
      options={{
        ...options,
        tilt: 0,
        mapTypeId: "roadmap",
        zoom: 10,
        fullscreenControl: viewMode !== "split",
        zoomControl: viewMode !== "split",
        cameraControl: true,
      }}
    >
      {/* <StreetViewPanorama
        options={{
          addressControl: false,
          fullscreenControl: viewMode !== "split",
          zoomControl: viewMode !== "split",
          position: { lat, lng },
          visible: true,
          motionTracking: false,
          motionTrackingControl: false,
        }}
      /> */}
    </GoogleMap>
  )
}

Here the demo:

https://jam.dev/c/a7d6aa70-36f3-4ea7-84bb-0409f934777a