Javascript React Native Swiper ref元素scrollTo在第一次渲染时不起作用

我正在我的应用程序中实现介绍功能。屏幕在启动屏幕后显示的位置。在我的应用程序中，我使用该组件引导用户逐步学习教程

下面是我的滑块.tsx组件代码

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>
  );
};

type SliderProps={
//swiperEl：重新对象；
//onIndexChanged:（索引：编号）=>无效；
指标：数量；
};
常量滑块=（{index}:SliderProps）=>{
const swiperEl=useRef（null）；
useffect（（）=>{
swiperEl.current！.scrollTo（索引）；
}，[指数，瑞士]；
返回(
);
};

这是我的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>
  );
};

const WelcomeScreen=（）=>{
常量[currentPage，setPage]=使用状态（0）；
const navigation=useNavigation（）；
const handleNextClick=（）=>{
如果（当前页面===2）{
navigation.navigate（'LoginScreen'）；
返回；
}
设置页面（（prevPage）=>prevPage+1）；
};
const handleSkipPress=（）=>navigation.navigate（'LoginScreen'）；
console.log（'Parent'，currentPage）；
返回(
{/*WelcomeScreen*/}
);
};

每当我点击“下一步”按钮时，它都会自动将刷子滑动到下一个组件或屏幕。但是，在第一次渲染时，当用户单击“下一步”按钮时，

swiperEl.current！。滚动到（索引）滑块的useEffect块上编码>。tsx不工作。但是当用户第二次点击时，它突然不起作用了

我是React的初学者，但我会仔细阅读文档，了解如何使用useRef和useffect的挂钩。也许我错过了什么

如果有人能帮忙，我将不胜感激。
谢谢