sửa lỗi polygon không bị xóa ở map

components/map/PolygonWithLabel.tsx

@@ -1,5 +1,5 @@
 import { getPolygonCenter } from "@/utils/polyline";
-import React, { memo } from "react";
+import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Marker, Polygon } from "react-native-maps";
 
@@ -20,7 +20,7 @@ export interface PolygonWithLabelProps {
 /**
  * Component render Polygon kèm Label/Text ở giữa
  */
-const PolygonWithLabelComponent: React.FC<PolygonWithLabelProps> = ({
+export const PolygonWithLabel: React.FC<PolygonWithLabelProps> = ({
   coordinates,
   label,
   content,
@@ -65,7 +65,7 @@ const PolygonWithLabelComponent: React.FC<PolygonWithLabelProps> = ({
       {label && (
         <Marker
           coordinate={centerPoint}
-          zIndex={200}
+          zIndex={50}
           tracksViewChanges={false}
           anchor={{ x: 0.5, y: 0.5 }}
         >
@@ -142,24 +142,3 @@ const styles = StyleSheet.create({
     opacity: 0.95,
   },
 });
-
-// Export memoized component để tránh re-render không cần thiết
-export const PolygonWithLabel = memo(
-  PolygonWithLabelComponent,
-  (prev, next) => {
-    // Custom comparison: chỉ re-render khi coordinates, label, content hoặc zoomLevel thay đổi
-    return (
-      prev.coordinates.length === next.coordinates.length &&
-      prev.coordinates.every(
-        (coord, index) =>
-          coord.latitude === next.coordinates[index]?.latitude &&
-          coord.longitude === next.coordinates[index]?.longitude
-      ) &&
-      prev.label === next.label &&
-      prev.content === next.content &&
-      prev.zoomLevel === next.zoomLevel &&
-      prev.fillColor === next.fillColor &&
-      prev.strokeColor === next.strokeColor
-    );
-  }
-);

components/map/PolylineWithLabel.tsx

@@ -2,7 +2,7 @@ import {
   calculateTotalDistance,
   getMiddlePointOfPolyline,
 } from "@/utils/polyline";
-import React, { memo } from "react";
+import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Marker, Polyline } from "react-native-maps";
 
@@ -21,7 +21,7 @@ export interface PolylineWithLabelProps {
 /**
  * Component render Polyline kèm Label/Text ở giữa
  */
-const PolylineWithLabelComponent: React.FC<PolylineWithLabelProps> = ({
+export const PolylineWithLabel: React.FC<PolylineWithLabelProps> = ({
   coordinates,
   label,
   strokeColor = "#FF5733",
@@ -103,22 +103,3 @@ const styles = StyleSheet.create({
     textAlign: "center",
   },
 });
-
-// Export memoized component để tránh re-render không cần thiết
-export const PolylineWithLabel = memo(
-  PolylineWithLabelComponent,
-  (prev, next) => {
-    // Custom comparison: chỉ re-render khi coordinates, label hoặc showDistance thay đổi
-    return (
-      prev.coordinates.length === next.coordinates.length &&
-      prev.coordinates.every(
-        (coord, index) =>
-          coord.latitude === next.coordinates[index]?.latitude &&
-          coord.longitude === next.coordinates[index]?.longitude
-      ) &&
-      prev.label === next.label &&
-      prev.showDistance === next.showDistance &&
-      prev.strokeColor === next.strokeColor
-    );
-  }
-);