pagination render empty tag

using

swiper: ^6.1.1,
react-id-swiper:  ^4.0.0

get nothing on pagination tag. It means it renders nothing in .pagination. Also, the fade effect does nothing.

here is my try:

// SlideShow.js
<Carousel
      options={{
        slidesPerView: 'auto',
        pagination: {
           el: '.swiper-pagination',
           clickable: true
       }
}}>
   {listCard.map((card) => {
    return ( 
      <div key={card.id} className={styles.cardWrapper}>
          <EventCard card={card} />
      </div>
    );
})}
</Carousel>

// Carousel.js
export const Carousel = ({ children, options }) => {
	const defaultOption = {
                effect: 'fade',
		shouldSwiperUpdate: true,
		rebuildOnUpdate: true,
		grabCursor: true,
		spaceBetween: 10
	};
	const sliderOption = Object.assign(defaultOption, options);

	return <Swiper {...sliderOption}>{children}</Swiper>;
};

[Quirksmode]

I managed to fix the pagination by downgrading Swiper to version “5.4.5” as per this working example

https://codesandbox.io/s/pagination-dynamic-bullets-example-forked-rqu2q?file=/src/App.tsx

[imshing]

seems Swiper > 6.x.x already support React Component please check in here: https://swiperjs.com/react/ its work fine with the pagination