[Bug] Video layer plays faster and faster every time the map react component is updated

[fungiboletus]

Description

I added a video layer to play a video in the map:

const urls = ['https://www.mapbox.com/blog/assets/baltimore-smoke.mp4'];
const coordinates = [
  [-76.54, 39.18],
  [-76.52, 39.18],
  [-76.52, 39.17],
  [-76.54, 39.17]
];

 <Source id="video-hack-source" type="video" urls={urls} coordinates={coordinates}>
      <Layer id="video-hack" type="raster" />
</Source>

The video plays very weirdly, going way to fast and stopping randomly. When I analyse the playing events on the <Video> elements, I notice that it's a lot of events being triggered and the number increases when the react component of the map is rendered.

Expected Behavior

The video should play smoothly.

Steps to Reproduce

-

Environment

• Framework version: react-map-gl@7.0.23
• Map library: mapbox-gl@2.14.1
• Browser: Edge
• OS: Mac

Logs

No response

[Pessimistress]

Please create a CodeSandbox that reproduces your issue.

[Pessimistress]

Closing for inactivity.