Decomposing react native component - react-native

Question

I've been trying to develop a react native app and I'm stuck here . I want to decompose onboarding component. Here is what I've done . Is it oke or what else can I do more readeble code ? I've divided Slider and SubSlider component but I think it isn't enough .Can I use component instead of functions Any suggestion will help me . What are the best practices in this case ? Thanks
const renderScrollView = (scroll, width: number, x: Animated.Value) => {
return (
<Animated.ScrollView showsHorizontalScrollIndicator={false} ref={scroll} pagingEnabled
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x } } }], {
useNativeDriver: true,
})}
horizontal
>
{slides.map((data, index) => {
return (
<Slider key={index}>
<SliderImage src={data.src} />
<Box paddingHorizontal="l">
<SliderTitle>{data.label}</SliderTitle>
<SliderText>{data.description}</SliderText>
</Box>
</Slider>
);
})}
</Animated.ScrollView>
);
};
const renderSubSlider = (width: number,x: Animated.Value) => {
return (
<SubSlider>
<SubSliderItem>
{slides.map((_, index) => {
return (
<Dot
key={index + 1}
currentIndex={Animated.divide(x, width)}
{...{ index }}
/>
);
})}
</SubSliderItem>
</SubSlider>
);
};
const Onboarding = React.memo(({ onDone }: OnboardingProps) => {
const { width } = useDimensions().window;
const [completed, setCompleted] = useState<boolean>(false);
const scroll = useRef(null);
const x = React.useRef<Animated.Value>(new Animated.Value(0)).current;
React.useEffect(() => {
x.addListener(({ value }) => {
if (Math.ceil(value / width) === slides.length - 1) {
setCompleted(true);
} else {
setCompleted(false);
}
});
return () => x.removeAllListeners();
}, []);
return (
<Box flex={1} backgroundColor="mainBackground">
<Box flex={3}>{renderScrollView(scroll, width, x)}</Box>
{renderSubSlider(width, x)}
</Box>
);
});