Is this the correct way to use <GestureHandlerRootView>:

[ejazahmedsiddiqui]

return (
            <SafeAreaView style={styles.container} >
                <StatusBar hidden={true} />

                <ScrollView
                    style={styles.heroWrapper}
                    showsVerticalScrollIndicator={false}
                >
                    <View>
                        <GestureHandlerRootView>

                        <Carousel
                            autoPlayInterval={3000}
                            autoPlay={true}
                            data={images}
                            height={width}
                            loop={true}
                            pagingEnabled={true}
                            snapEnabled={true}
                            width={width}
                            style={{
                                width: width,
                            }}
                            mode="parallax"
                            modeConfig={{
                                parallaxScrollingScale: 0.9,
                                parallaxScrollingOffset: 50,
                            }}
                            onProgressChange={progress}
                            renderItem={renderItem}
                            windowSize={3}
                            scrollAnimationDuration={800}
                        />

                        </GestureHandlerRootView>
                    </View>

                    <View style={styles.homeContainer}>
// rest of my code
</SafeAreaView>
);
           

Or do i need to wrap the whole thing inside instead of ? How does it work and when should I use ?