Cannot trigger onHover event with cypress mouseover

[convers39]

I am using Cypress to test the mouseover behavior on a map (deck.gl), I have a TileLayer rendered on the DOM, and when hovering my mouse on the map, there is a tooltip popup beside the cursor (as below)

Now when I try to test this behavior with Cypress, the Cypress mouseover event seems not to work with the onHover function in TileLayer, not sure what is the reason here. I have tried both the official simulated mouseover with cy.get('element').trigger('mouseover') and the real event, none of them worked.

  it('should show coords when hovering over', () => {
        // move mouse to the map center
        cy.get('canvas[class="mapboxgl-canvas"]').realHover({
          position: 'center',
        })
        // cy.get('canvas[class="mapboxgl-canvas"]').realHover({position: 'top'})
        // cy.get('canvas[class="mapboxgl-canvas"]').realHover({
        //   position: 'bottom',
        // })
        // cy.get('canvas[class="mapboxgl-canvas"]').realHover({position: 'left'})
        // cy.get('canvas[class="mapboxgl-canvas"]').realHover({position: 'right'})
        // cy.get('div[id="view-default-view"]').realHover()

        // verify tooltips exist
        cy.findByTestId('layerTooltip').should('exist')
        cy.findByTestId('geoTooltip').should('exist')
      })
  })

A slight difference between using Cypress trigger and real event is that, the Cypress trigger can only work when select the div[id="view-default-view" element, if I try to select the canvas then it will fail as the canvas is covered by the div. With real event I don't have this issue. While both didn't trigger the onHover function.

import { TileLayer } from "@deck.gl/geo-layers";
import { StaticMap } from "react-map-gl";

// ...
    const onHoverTileLayer = (info: DeckglTileLayerInformation) => {
        console.log("onHoverTileLayer triggered"); // did not print to console when testing with Cypress
        onHoverLayer(info);

    };
// ...
    const layer = new TileLayer({
        pickable: true,
        onHover: onHoverTileLayer,
     });
// ...
     return (
            <DeckGL
                onViewStateChange={onViewStateChange}
                viewState={viewState}
                layers={[...layers, layer]}
                controller={true}
            >
                <StaticMap
                    width={"100%"}
                    height={"100%"}
                    mapStyle={`mapbox://styles/mapbox/${mapStyle}`}
                    mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
                />
            </DeckGL>
     )

A strange thing is that when I try to pin on a step, such as a step of getting the canvas element in Cypress, the map is not showing (as below).

If I remove the pin then it shows the map again, and the onHover function is triggered normally when I move the cursor in.

Does anyone have any clues on this issue?