Почему в свайпере не отображается пагинация?

Question

[Xwe]

Есть этот элемент
<div className={s.slider__bullets}></div>

В компоненте свайпера в пропсах я отправил класс этого элемента

import React, { useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';
import Product from '../product/product';
import s from './product-slider.module.scss';
import 'swiper/css';
import 'swiper/css/navigation';

const ProductSlider = () => {
  const bullets = useRef<HTMLDivElement>(null!);

  return (
    <div className={s.products__slider}>
      <Swiper
        spaceBetween={50}
        observer
        observeParents
        slidesPerView={4}
        modules={[Pagination]}
        navigation={{}}
        pagination={{
          el: `.${s.slider__bullets }`,
          clickable: true,
        }}
      >
        <SwiperSlide>
          <Product></Product>
        </SwiperSlide>
        <SwiperSlide>
          <Product></Product>
        </SwiperSlide>
        <SwiperSlide>
          <Product></Product>
        </SwiperSlide>
        <SwiperSlide>
          <Product></Product>
        </SwiperSlide>
        <SwiperSlide>
          <Product></Product>
        </SwiperSlide>
      </Swiper>
      <div className={s.slider__bullets}></div>
    </div>
  );
};
export default ProductSlider;

Но элемент не подхватывается свайпером, к нему не добовляются нативные классы и он не отображается.

Comments

[Artyom]

el: `.${s.slider__bullets }`, // точка в начале лишняя