MapView inside a react-native-snap-carousel

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>

) }