I want to fetch top 5 markers that are closest to the users location (in order) and put that into a useState object. How can I achieve that?

My map screen loadflow:

1. Load map
2. Get user location (stored in location useState)
3. HTTP Get request for markers location (each marker got lat and ltd)
4. Fetch markers around user (if agreed to share location)
5. Display screen

    const fetchClosestRendelok = async () => {

      //Get markers in an area here and add to a json 
    }

    const fetchRendeloData = async () => {
        const data = await fetchRendelok()
        setRendelok(data)
    }

    useEffect(() => {
      fetchRendeloData()
      fetchClosestRendelok()
    }, []);



return (
    <View style={styles.container}>
        <MapView style={styles.map}
        provider={PROVIDER_GOOGLE}
        region={mapRegion}
        showsUserLocation={true}
        onPress={() => setSelectedMarkerIndex("")}
        >
            {
            rendelok.map((rendelok) => {
              return (
              <Marker
              key={rendelok.id}
              coordinate={{ latitude:parseFloat(rendelok.lat), longitude:parseFloat(rendelok.ltd) }}
              onPress={() => markerClick(rendelok)}
              tracksViewChanges={false}
              >
                <View>
                  <MaterialCommunityIcons name="hospital-marker" size={selectedMarkerIndex === rendelok.id ? 80 : 30} color={selectedMarkerIndex === rendelok.id ? 'red' : color_theme_light.iconColor}/>
                </View>
              </Marker >
              )
              })
            }
        </MapView>   

    </View>
);
}