android markers fix

src/screens/InAppScreens/MapScreen/UserItem/index.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { View, Image, Text, TouchableOpacity, Platform } from 'react-native';
 
 import { Colors } from 'src/theme';
 
 import * as MapLibreRN from '@maplibre/maplibre-react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from 'src/types';
 import moment from 'moment';
 import { styles } from '../MarkerItem/styles';
@@ -12,6 +12,20 @@ import { styles } from '../MarkerItem/styles';
 const UserItem = ({ marker }: { marker: any }) => {
   const calloutUserRef = useRef<MapLibreRN.PointAnnotationRef>(null);
   const navigation = useNavigation();
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (Platform.OS === 'android') {
+        const timer = setTimeout(() => {
+          calloutUserRef.current?.refresh();
+          setRefreshKey((prev) => prev + 1);
+        }, 100);
+
+        return () => clearTimeout(timer);
+      }
+    }, [])
+  );
 
   useEffect(() => {
     if (Platform.OS === 'android') {
@@ -101,7 +115,8 @@ const UserItem = ({ marker }: { marker: any }) => {
         </MapLibreRN.PointAnnotation>
       ) : (
         <MapLibreRN.PointAnnotation
-          id="selected_user_callout"
+          id={marker.id.toString()}
+          key={refreshKey}
           coordinate={marker.coordinates}
           anchor={{ x: 0.5, y: 1.1 }}
           onSelected={() =>