Update map markers dynamically on slider change - React Native - react-native

Question

I have a little problem with rendering markers.
Everything gets slow and laggy.
You can see it on this video: https://streamable.com/fjqe7
Is there a way to render my Markers smoother?
this is what I tried
<View style={styles.slider}>
<Slider
maximumValue={1000}
minimumValue={100}
step={50}
value={this.state.newRadius}
onValueChange={newRadius => {
this.setState({newRadius})
this.getLocation()
}}
/>
<View>
<Text>Radius: {this.state.newRadius} meter</Text>
</View>
</View>
onValueChange I'm loading the getLocation()
my getLocation is for showing and filtering my Markers inside my RadiusValue
getLocation(){
let { region } = this.state;
let { latitude, longitude } = region;
let markers = spielanlagen.map(marker => {
let name = marker.name
let image = marker.image
let street = marker.street
console.log(name);
console.log(marker.coordinate);
let coords = marker.coordinate
return {
coordinate: {
latitude: coords[0],
longitude: coords[1],
},
name: marker.name,
street: marker.street,
image: marker.image
}
}).filter(marker => {
let distance = this.calculateDistance(latitude, longitude, marker.coordinate.latitude, marker.coordinate.longitude);
return distance <= this.state.newRadius;
});
this.setState({
markers: markers,
loaded: true,
});
};
calculateDistance(origLat, origLon, markerLat, markerLon) {
return geolib.getDistance(
{latitude: origLat, longitude: origLon},
{latitude: markerLat, longitude: markerLon}
);
}
I hope there is a better solution with re-rendering the markers.