fix reuseMaps not removing map children (#2092)

Author: lh0x00

src/components/map.tsx

@@ -152,7 +152,9 @@ const Map = forwardRef<MapRef, MapProps>((props, ref) => {
   return (
     <div id={props.id} ref={containerRef} style={style}>
       {mapInstance && (
-        <MapContext.Provider value={contextValue}>{props.children}</MapContext.Provider>
+        <MapContext.Provider value={contextValue}>
+          <div mapboxgl-children="">{props.children}</div>
+        </MapContext.Provider>
       )}
     </div>
   );

src/mapbox/mapbox.ts

@@ -587,6 +587,11 @@ export default class Mapbox {
   /* eslint-enable complexity,max-statements */
 
   recycle() {
+    // Clean up unnecessary elements before storing for reuse.
+    const container = this.map.getContainer();
+    const children = container.querySelector('[mapboxgl-children]');
+    children?.remove();
+
     Mapbox.savedMaps.push(this);
   }