Why can't I use the component directly?

I'm trying to use my component within SwiperSlide: using this directly inside it does work:

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

but if do something like:

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

it doesn't work. later on I found this works:

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

but i'd to fix and use <Foo /> properly, if possible.

full code:

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

live example here

what am I missing? How do I fix that?