How to stop cursor flickering over icons?

Nobody has claimed this yet.

How do I stop cursor flicker over my mapbox icons? Here is the live site where you can see the problem when hovering over the marker icons: https://rustic-waters-group.thesparksite.com/lakes/

```

mapboxgl.accessToken = "pk.eyJ1IjoiZG1pdHJpbWFydGluIiwiYSI6ImNreHRobHRmcjVqM3cydmt5NWkxdWNibTcifQ.CuN5Dwc963TW-BKRcowxBA";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/dmitrimartin/ckxtj5aur4fvv15mrhmihala8",
center: [-89.2, 44.33],
zoom: 9.2,
});

map.on("load", () => {
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
});

map.on("mouseenter", "lakes", (event) => {
map.getCanvas().style.cursor = "pointer";
const features = map.queryRenderedFeatures(event.point, {
layers: ["lakes"],
});
if (event.features.length === 0) return;
popup.setLngLat(features[0].geometry.coordinates);
popup.setHTML(
"

" + features[0].properties.title + "

"
);
popup.setMaxWidth("calc(100vw - 40px);");
popup.addTo(map);
});

map.on("mouseleave", "lakes", () => {
map.getCanvas().style.cursor = "";
popup.remove();
});

map.on("click", "lakes", (event) => {
const features = map.queryRenderedFeatures(event.point, {
layers: ["lakes"],
});
if (event.features.length === 0) return;
window.location.href = "/lakes/" + features[0].properties.url + "/";
});

document.getElementById("lakes-header").onmouseover = function () {
MyMouseOver();
};

function MyMouseOver() {
document.getElementById("wrapper").style.display = "none";
document.getElementById("lakes-header").style.display = "none";
}
});

```

Start with the linked live site and the provided map.on("load") handlers, especially the "mouseenter" and "mouseleave" listeners for the "lakes" layer. Reproduce the cursor behavior over the icons, trace the popup and cursor changes, and confirm completion when hovering no longer produces flicker.

Written by the indexing model from the issue text.