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

src/components/Charts/used-devices/index.tsx

@@ -17,11 +17,11 @@ export async function UsedDevices({
   return (
     <div
       className={cn(
-        "grid grid-cols-1 grid-rows-[auto_1fr] gap-9 rounded-[10px] bg-white p-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card",
+        "grid grid-cols-1 grid-rows-[auto_1fr] gap-9 rounded-[10px] bg-white shadow-1 dark:bg-gray-dark dark:shadow-card",
         className,
       )}
     >
-      <div className="flex flex-wrap items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4 p-7.5">
         <h2 className="text-body-2xlg font-bold text-dark dark:text-white">
           Used Devices
         </h2>
@@ -29,7 +29,7 @@ export async function UsedDevices({
         <PeriodPicker defaultValue={timeFrame} sectionKey="used_devices" />
       </div>
 
-      <div className="grid place-items-center">
+      <div className="grid place-items-center pb-7.5">
         <DonutChart data={data} />
       </div>
     </div>