我尝试在SwiperSlide中使用我的组件：直接在里面使用它确实有效：

<Swiper>
          <SwiperSlide>
            <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
          </SwiperSlide>
</Swiper>

但如果你这样做：

const Foo = () =>
  <SwiperSlide>
    <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
  </SwiperSlide>
;

<Swiper>
         <Foo />
</Swiper>

不管用。后来我发现这个管用：

<Swiper>
         {Foo()}
</Swiper>

但是如果可能的话，我会正确地修复和使用<Foo />。
完整代码：

import React, { useRef, useState } from "react";
    // Import Swiper React components
    import { Swiper, SwiperSlide } from "swiper/react";
    
    // Import Swiper styles
    import "swiper/css";
    import "swiper/css/pagination";
    import "swiper/css/navigation";
    import "swiper/css/navigation";
    import "swiper/css/effect-fade";
    
    import "./styles.css";
    
    // import required modules
    import { EffectFade, Autoplay, Pagination, Navigation } from "swiper";
    
    export default function App() {
      return (
        <>
          <Swiper
            effect={"fade"}
            loop={true}
            navigation={true}
            spaceBetween={30}
            centeredSlides={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
            }}
            pagination={{
              clickable: true
            }}
            modules={[EffectFade, Autoplay, Pagination, Navigation]}
            className="mySwiper"
          >
            <SwiperSlide>
              <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
            </SwiperSlide>
            <Foo />
          </Swiper>
        </>
      );
    }

const Foo = () => (
  <SwiperSlide>
    <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
  </SwiperSlide>
);

实时示例here
我错过了什么？我该怎么弥补？