Why is pagination not displayed in the swiper?

Question

React

There is this element In the swiper component in props, I sent the class of this element
<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;

But the element is not picked up by the swiper, native classes are not added to it, and it is not displayed.