React Native Maps - How to update callout markers

I am trying to update my callout markers when my mapview re-renders however, my mapview still displays the old data even though i am using useState. The callout marker updates if it closes and re-opens. Is there a way to automatically close the callout markers when the mapview re-renders or update the callout marker when the mapview re-renders.

Example:Marker callout displays "Distance: 2KM"When i re-render the map, it should display another value for the callout like "Distance: 5KM". Instead the marker remains on the map and displays the old value "Distance: 2KM"

My Code:

const [RouteDistance, setRouteDistance] = useState(0);...return(<MapView        region={{          latitude: lat,          longitude: lng,          latitudeDelta: 0.1,          longitudeDelta: 0.1,        }}><Marker        coordinate={{          latitude: lat,          longitude: lng,        }}><Callout><View><Text>  Distance:{RouteDistance} </Text></View></Callout></Marker></MapView>);