Почему не отображаются точки пагинации в виде картинок через React-swiper?

Question

[Dmitriy-kartavyi]

Задача состоит в том, что бы создат слайдер. Главная картинка слайда должена быть большая. Точки пагинации должны быт в виде картинок. https://yapx.ru/album/W0MYR
Но у меня получается что вместо картинок выводятся обычные точки пагинации https://yapx.ru/album/W0MfC

Есть вот такой файл

import {useState} from "react"
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/swiper-bundle.css';
import "./Project.scss"

const Project:React.FC = () => {
   
   const slides = [
      { img: "https://i.yapx.ru/Wz5Oe.jpg"},
      { img: "https://i.yapx.ru/Wz5Of.jpg"},
      { img: "https://i.yapx.ru/Wz5Og.jpg"}
   ]
   const [activeIndex, setActiveIndex] = useState(0);
   const handleSlideChange = (index: number) => {
      setActiveIndex(index);
   };
   return (
      <div className='swiper-container'>
         <Swiper
            modules={[Navigation, Pagination]}
            spaceBetween={50}
            slidesPerView={1}
            navigation={true}
            pagination={{
               clickable: true,
               renderCustom: function (swiper: any, current:number, total: string | number) {
                  return (
                     <div className="custom-pagination">
                        {slides.map((slide, index) => 
                           <img
                              key={index}
                              src={slide.img}
                              className={activeIndex === index ? 'active' : ''}
                              onClick={() => {
                                 handleSlideChange(index);
                                 swiper.slideTo(index);
                              }}
                           />
                        )}
                     </div>
                  );
               }
            }}
         >
            {slides.map((slide, index) => (
               <SwiperSlide key={index}>
                  <img src={slide.img} alt={`Slide ${index + 1}`} />
               </SwiperSlide>
            ))}
         </Swiper>
      </div>
   )
}

export default Project;

К нему прилагаю SCSS

img{
      max-width: 795px;
   }

Comments

[Чипекве]

https://swiperjs.com/demos#thumbs-gallery