feat(map): enhance map component with ref for container and cleanup logic

src/app/(home)/_components/region-labels/map.tsx

@@ -1,13 +1,23 @@
 "use client";
 
 import jsVectorMap from "jsvectormap";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 import "@/js/us-aea-en";
 
 export default function Map() {
+  const mapContainerRef = useRef<HTMLDivElement | null>(null);
+
   useEffect(() => {
-    new jsVectorMap({
+    let map: InstanceType<typeof jsVectorMap> | null = null;
+    const container = mapContainerRef.current;
+
+    if (!container) return;
+
+    // Dev Strict Mode can run effects twice; clear old markup before re-init.
+    container.innerHTML = "";
+
+    map = new jsVectorMap({
       selector: "#mapOne",
       map: "us_aea_en",
       zoomButtons: true,
@@ -37,11 +47,20 @@ export default function Map() {
         },
       },
     });
+
+    return () => {
+      try {
+        map?.destroy?.();
+      } catch {
+        // jsVectorMap can throw during React Strict Mode cleanup in dev.
+      }
+      container.innerHTML = "";
+    };
   }, []);
 
   return (
     <div className="h-[422px]">
-      <div id="mapOne" className="mapOne map-btn" />
+      <div ref={mapContainerRef} id="mapOne" className="mapOne map-btn" />
     </div>
   );
 }