Hidden objects leave a screen-space ghost #165

import React from "react";
import MapGL from "react-map-gl/maplibre";
import { Canvas, Coordinates } from "react-three-map/maplibre";

export default function OverlayGhostTest() {
  const [show, setShow] = React.useState(true);

  React.useEffect(() => {
    const t = setInterval(() => setShow((v) => !v), 2000);
    return () => clearInterval(t);
  }, []);

  return (
    <MapGL
      initialViewState={{
        longitude: 24.1,
        latitude: 56.95,
        zoom: 13
      }}
      style={{ width: "100vw", height: "100vh" }}
      mapStyle="https://demotiles.maplibre.org/style.json"
    >
      <Canvas
        longitude={24.1}
        latitude={56.95}
        altitude={0}
        frameloop="always"
        overlay
      >
        <Coordinates longitude={24.1} latitude={56.95} altitude={0}>
          {show && (
            <mesh position={[0, 0, 0]}>
              <boxGeometry args={[10, 10, 10]} />
              <meshBasicMaterial color="red" />
            </mesh>
          )}
        </Coordinates>
      </Canvas>
    </MapGL>
  );
}