Carousel does not swipe right when its gets to the 3 image it gets stuck

Un able to swipe right when i get to the third image on android... swipe right doesnot seems to work when i am on the third image... but swipe left seems to be working perfect on android and ios

Please help me out Thanks in advance

import { View, Text, TouchableOpacity, TextInput, ScrollView, SafeAreaView, Dimensions, Image, ImageBackground } from 'react-native';
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { appbaseThemeColor } from '../../contants';

const BannerCaroselSlider = () => {
    useEffect(() => {

    }, [])
    const

        [activeSlide, setActiveSlide] = useState(0),
        [bannerGridData, setBannerGridData] = useState([
            {

                image: require('../../assests/banner1.png'),


            },
            {

                image: require('../../assests/banner2.png'),


            },
            {

                image: require('../../assests/banner3.png'),


            },
            {

                image: require('../../assests/banner4.png'),
            }
        ]);
    function pagination() {
        // const { activeSlide } = activeSlide;
        return (
            <Pagination
                // activeOpacity={0.5}
                // animatedTension={0}
                // animatedFriction={0}
                // animatedDuration={10}

                dotsLength={bannerGridData.length}
                activeDotIndex={activeSlide}
                containerStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.0)'
                }}
                dotStyle={{
                    width: 7,
                    height: 7,
                    borderRadius: 5,
                    marginVertical: 0,
                    backgroundColor: appbaseThemeColor
                }}
                inactiveDotStyle={{
                    width: 10,
                    height: 10,
                    borderRadius: 5,
                    backgroundColor: '#DEDEDE'
                }}
                inactiveDotOpacity={1}
                inactiveDotScale={0.6}

            />
        );
    }
    function _renderItem({ item, index }) {
        return (
            // <View key={index} style={{ width: "100%", aspectRatio: 2 / 1, borderWidth: 2, borderColor: "red" }} >
            //     <ImageBackground source={item.image} style={{ width: "100%", height: "100%", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 20 }} resizeMode="cover" resizeMethod="auto">

            //         {pagination()}

            //     </ImageBackground>
            // </View>

            <View key={index} style={{ flex: 1, borderWidth: 0, marginBottom: 20 }} >
                <ImageBackground source={item.image} style={{ aspectRatio: 1.1 / 0.5, flexDirection: "column", justifyContent: "flex-end", }} resizeMode="contain" resizeMethod="resize">

                    {pagination()}

                </ImageBackground>
            </View>
        )
    }
    return (
        <SafeAreaView style={{marginTop:-2}}>

            <Carousel
                sliderWidth={Dimensions.get('window').width}
                itemWidth={Dimensions.get('window').width}
                data={bannerGridData}
                renderItem={_renderItem}
                onSnapToItem={(index, animation = false) => setActiveSlide(index)}
                autoplay={true}
                autoplayDelay={2000}
                autoplayInterval={2000}
                loop={true}
                activeAnimationType="decay"
            />
            {/* {pagination()} */}
        </SafeAreaView>
    )
}
export default BannerCaroselSlider;

Start with the provided BannerCaroselSlider component and its react-native-snap-carousel Carousel configuration. Reproduce the Android behavior by swiping right from the third image, then compare it with left swipes and iOS behavior. Done means right swiping advances past the third image without breaking the existing loop, autoplay, or pagination behavior.