React Swiper does not rendering slides when passing slides via children prop

I am trying to build a carousel using swiper, I am trying to pass the SwiperSlide as children of the Swiper in this case it does not render the slides in the browser

here is how I tried:

MyCarousel.tsx:

import React from 'react';
import { Swiper } from 'swiper/react';
import 'swiper/css';

interface ComponentProps {
  children: ReactNode
}

function MyCarousel({children}: ComponentProps){
  return (
    <Swiper loop={true} spaceBetween={50} slidesPerView={1}>
      {children}
    </Swiper>
  );
};

export default MyCarousel;

MySlides.tsx:

import React from 'react'
import { SwiperSlide } from 'swiper/react'

function MySlides({ slides }: ComponentProps) {

  return (
    <>
      {slides.map((slide) => (
        <SwiperSlide className="h-full" key={slide.id}>
          <div
            className="h-full bg-cover bg-center bg-no-repeat blur-3xl"
            style={{ backgroundImage: `url(${slide.src})` }}
          ></div>
          <div className="absolute inset-0 flex h-full justify-center">
            <img src={slide.src} alt={slide.src} />
          </div>
        </SwiperSlide>
      ))}
    </>
  )
}

MyPage.tsx:

import React from 'react'
import MySlidesfrom '@components/my-slides'

function MyPage() {

  const slides = [
    { id: 1, src: 'my-image-1.jpg' },
    { id: 2, src: 'my-image-2.jpg' },
    { id: 3, src: 'my-image-3.jpg' },
  ];

  return (
    <div>
      <h1>My Page</h1>
      <CarouselProvider>
        <MySlides slides={slides} />
      </CarouselProvider>
    </div>
  );
};

The above way is not working. It is not working the slides in the DOM as you can see in the screenshot the swiper-wrapper is empty
swiper-wrapper div is empty in the DOM

If I modify MyPage.tsx this way it works as it should-

import React from 'react'

function MyPage() {

  const slides = [
    { id: 1, src: 'my-image-1.jpg' },
    { id: 2, src: 'my-image-2.jpg' },
    { id: 3, src: 'my-image-3.jpg' },
  ];

  return (
    <div>
      <h1>My Page</h1>
      <CarouselProvider>
        {slides.map((slide) => (
          <SwiperSlide className="h-full" key={slide.id}>
            <div
              className="h-full bg-cover bg-center bg-no-repeat blur-3xl"
              style={{ backgroundImage: `url(${slide.src})` }}
            ></div>
            <div className="absolute inset-0 flex h-full justify-center">
              <img src={slide.src} alt={slide.src} />
            </div>
          </SwiperSlide>
        ))}
      </CarouselProvider>
    </div>
  );
};

I am using

  • “react”: “^18.3.1”,
  • “swiper”: “^11.1.15”,

Thank you so much for your attention and participation.