MapView inside a react-native-snap-carousel - react-native

Question

i have implemented react-native-maps inside carousel view to show floor plans of a 2-floor building, and everything is working fine.
Now when i try to call a function to re-centre the floor-plan image, first slide is not getting responsive to the function whereas the second slide works fine and as expected.
if(Platform.OS === 'ios'){
console.log("mapview" ,mapView);
return (
<View style={styles.container} key={index}>
<MapView
style={{
height:Dimensions.get('window').height,
width:Dimensions.get('window').width
}}
ref={mapView}
provider={PROVIDER_GOOGLE}
mapType= "none"
minZoomLevel = {16}
maxZoomLevel = {18}
initialRegion={{
latitude:mapcenterlat,
latitudeDelta: 0.009,
longitude:mapcenterlng,
longitudeDelta:0.0315,
}}>
<Overlay
bounds={[
[coord_topleft_lat, coord_topleft_lng],
[coord_bottomright_lat, coord_bottomright_lng]
]}
image= {item.floorplan_image}
/>
{item.locations.map((polygon,index) =>
(<MapView.Polygon
key={polygon.index}
coordinates={polygon.coordinates}
fillColor={polygon.fillcolor}
fillOpacity={2}
strokeColor={polygon.strokecolor}
tappable = {true}
strokeOpacity= {1}
strokeWeight={1}
onPress={() => createBooking(polygon.id,polygon.name,polygon.is_reserved,polygon.assets)}
/>),
)}
</MapView>
<View style={{position: 'absolute',flexDirection:'row',padding:70,marginVertical:-50}}>
<Text style={{fontWeight: 'bold', fontSize: 20}}>
{item.floor_name}
</Text>
<Pagination
dotsLength={floorlist.length}
activeDotIndex={activeSlide}
carouselRef={isCarousel}
dotStyle={{
width: 10,
height: 10,
borderRadius: 5,
marginHorizontal: 0,
backgroundColor: 'rgba(0, 0, 0, 0.92)'
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
tappableDots={true}
activeOpacity= {1}
/>
</View>
<View style={{position: 'absolute',flexDirection:'column',top:hp('33%'),marginHorizontal:10}}>
<TouchableOpacity onPress={() => _carousel.snapToPrev()}><AntDesign name="left" size={24} color="black" /></TouchableOpacity>
<TouchableOpacity onPress={() => _carousel.snapToNext()}><AntDesign name="right" size={24} color="black" /></TouchableOpacity>
)
}