React Native Swiper ref element scrollTo does not work on first render

I am implementing an Introduction feature in my app. Where the screens show after splash screen. I used react-native-swiper component for guiding the user to step by step tutorial in my app.

Here is my Slider.tsxcomponent code below.

type SliderProps = {  // swiperEl: RefObject<Swiper>;  // onIndexChanged: (index: number) => void;  index: number;};const Slider = ({ index }: SliderProps) => {  const swiperEl = useRef(null);  useEffect(() => {    swiperEl.current!.scrollTo(index);  }, [index, swiperEl]);  return (<View style={styles.sliderContainer}><Swiper        scrollEnabled={false}        index={index}        ref={swiperEl}        style={styles.wrapper}><View style={styles.slide1}><View style={[styles.circle, { backgroundColor: '#FF7F50' }]} /></View><View style={styles.slide2}><View style={[styles.circle, { backgroundColor: '#FF6347' }]} /></View><View style={styles.slide3}><View style={[styles.circle, { backgroundColor: '#FF4500' }]} /></View></Swiper></View>  );};

and here is my WelcomeScreenContainer.tsx

const WelcomeScreen = () => {  const [currentPage, setPage] = useState(0);  const navigation = useNavigation();  const handleNextClick = () => {    if (currentPage === 2) {      navigation.navigate('LoginScreen');      return;    }    setPage((prevPage) => prevPage + 1);  };  const handleSkipPress = () => navigation.navigate('LoginScreen');  console.log('Parent', currentPage);  return (<View style={styles.parentContainer}><View style={styles.headerContainer}>        {/* <Text style={{ fontSize: 35 }}>WelcomeScreen</Text> */}</View><Slider index={currentPage} /><View style={{ flex: 1 }} /><ButtonContainer        onNextPress={handleNextClick}        onSkipPress={handleSkipPress}      /></View>  );};

Whenever I click the next button it should automatically slide the swiper to the next component or screen. However, on the first render when the user clicks the next button the swiperEl.current!.scrollTo(index); on the useEffect block of Slider.tsx does not work. But when the user clicks for the second time not it suddenly works.

I am a beginner in using React but I follow the documentation carefully on how to use the hooks of useRef and useEffect. Maybe I am missing something?

Appreciate it if someone could help.Thanks