Popout Window - react-map-gl interaction breaking

[ConnorTJolley]

Describe the bug
Apologies for the specific case bug, but if you have a https://visgl.github.io/react-map-gl/docs react-map-gl component within a panel and then have that popout, all interaction seems to break.

To Reproduce

Steps to reproduce the behavior:

• Have a basic layout of 2/3 panels (ensuring one is a full width/height react-map-gl map component)
• Interact with the map via dragging and panning the view
• Observe it is working correctly
• Popout the panel that contains the map
• Interact with the map via dragging and panning the view
• Observe it is not working
• Click and hold in the map component and drag your mouse over one of the existing panels in the layout
• Observe the map interaction now briefly does something

Expected behavior
I would expect that the popout of the map panel would ensure that the div the components create for its interaction are retained within the panel and the interaction isn't broken.

Screenshots

Above SC shows that the div the mapbox creates in the root of the DOM it belongs to is still present in the original location of the panel

Above SC shows that the canvas that belongs to the map is present in the popout window

Desktop (please complete the following information):

• Chrome
• Version 131.0.6778.140

Additional context
Apologies again for not being able to give a codesandbox or fork that can show this issue better, I do have the following video which demonstrates the issue:

2024-11-27.11-19-44.mp4