Hidden objects leave a screen-space ghost

[haraldsegliens]

• three version: 0.165.0 (also reproduced with ^0.183.2)
• @react-three/fiber version: ^9.5.0
• react-three-map version: ^1.0.0
• node version: v24.0.2
• npm (or yarn) version: 11.3.0

Problem description:

With react-three-map/maplibre and Canvas overlay, removing or hiding an object can leave a ghost image on screen.

Observed behavior:

• the ghost stays fixed in screen space
• it keeps the same screen size
• it does not move with the map
• resizing the browser window clears it

Recording.2026-03-15.235431.mp4

I was able to reproduce this with a minimal test that only toggles a simple box on and off.

Relevant code:

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>
  );
}

Expected behavior:

• when show becomes false, the box disappears completely

Actual behavior:

• the box can leave a ghost image fixed in screen space
• resizing the browser window clears the ghost