MapView data not working correctly inside a Modal in React Native

Question

reopened modal

Initial open modal

Need your help

In React Native, I'm using MapView inside a modal. On the first load, the initial state of latitude, longitude, mapType, circle, and marker all work fine. However, when I close and reopen the modal, everything disappears, leaving only the MapView with the default standard mapType and a global view.

const [markerPosition, setMarkerPosition] = useState({ latitude: 11.341036, longitude: 77.717164, });

const radius = 8000;

const [region, setRegion] = useState({ latitude: 11.341036, longitude: 77.717164, latitudeDelta: 0.0922, longitudeDelta: 0.0421, });

const handleRegionChangeComplete = (newRegion) => { setRegion(newRegion); setMarkerPosition({ latitude: newRegion.latitude, longitude: newRegion.longitude, }); };

<Modal
visible={isModalBillVisible}
transparent={true}
animationType="slide"
>
<View style={commonStyles.slot}>
<MapView
style={commonStyles.map}
mapType="hybrid"
region={region}
onRegionChangeComplete={handleRegionChangeComplete}
>
<Marker coordinate={markerPosition} />
<Circle
center={{ latitude: 11.341036, longitude: 77.717164 }}
radius={radius}
strokeColor="rgba(0, 0, 0, 1)"
fillColor="rgba(0, 0, 0, 0)"
lineWidth={10}
/>
</MapView>
</View>
</Modal>

I tried fetching the data from Firebase dynamically, but that also doesn't work.