[Bug] Unexpected map distortion with sticky elements

Description

Given a minimal document, e.g., a div container that contains two elements:

1. A div with position sticky, top 0, and some height value
2. The Map component

When scrolling, as the sticky header sits on top of the map container, the map seems to scroll itself within the container, for the height of the sticky div. When the sticky div has been scrolled more than its height down the map container, the map canvas resets to the correct position. The issue only seems to happen on Chrome.

Expected Behavior

I would expect it to not scroll/visually distort on Chrome.

Steps to Reproduce

https://codesandbox.io/p/sandbox/sleepy-chaum-3xvglx?file=%2Fsrc%2Findex.js

Example here. Simply need a container, a sticky element with some height >0.

I have verified that the issue does not occur when creating a map using the Mapbox instructions here:
https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/ in place of the Map component in the above example.

Environment

• Framework version: React@18.2.0
• Map library: react-map-gl@7.1.7, mapbox-gl@3.0.0
• Browser: Google Chrome Version 126.0.6478.127 (Official Build) (x86_64)
• OS: macOS Sonoma 14.4.1

Logs

No response

Start with src/index.js in the linked CodeSandbox and reproduce the distortion in Chrome using a sticky element above the Map component. Compare the result with the Mapbox React example linked in the issue and narrow down the difference in behavior. Done means the map no longer scrolls or visually distorts while the sticky element overlaps it.