[Bug] Map is distorted when reuseMaps is true

[abidh-km]

Description

The map renders correctly on the initial load (see Image 1). However, the map becomes distorted or fails to load tiles properly (see Image 2) when the component is unmounted and remounted while the reuseMaps property is enabled. It appears as though the map container dimensions or tile coordinates are not being recalculated correctly upon re-insertion into the DOM.

The issue can be reproduced here (the mapbox token need to add): https://codesandbox.io/p/sandbox/reactjs-playground-forked-n5nfrk

Expected Behavior

The map must work well even after remount with reuseMap as true

Steps to Reproduce

• Load the map and perform pan (drag) and zoom actions.
• Click the "Toggle Map" button to unmount the component.
• Click the "Toggle Map" button again to remount the component.
• Observe the distorted map. (Note: If it doesn't happen immediately, repeat the steps 2-3 times, ensuring you interact with the map between toggles).

The issue can be reproduced here (the mapbox token need to add): https://codesandbox.io/p/sandbox/reactjs-playground-forked-n5nfrk

Environment

• Framework version: react-map-gl@8.1.0
• Map library: 3.18.0
• Browser: Chrome
• OS: Mac

Logs

No response