Dots are not showing react swiper slider

Question

Actually I wanna create slider with dots, slider is working, but dots are hidden. How should I make dots visible while using react swipper slider. I am using styled components for css. The thing is, I cannot find what is false in this part of code. please help me to figure out with this problem.

I tried to make my slider dots visible, however they are not showing.

this is my code

  

import { Pagination, Navigation, Scrollbar, A11y } from 'swiper';
import { Images } from 'assets/images';
import { useWindowDimensions } from 'hooks/useWindowDimensions';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from 'utils/routeNames';
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/swiper.scss';

import {
  CardAndDescriptionBlock,
  CardBlock,
  CountryImage,
  TripDurationAndPrice,
  TripDuration,
  CardDescription,
  TripCountryAndPrice,
  CountryStarsPriceWrapper,
  TripCountryAndStars,
  TripPrice,
  PricePerPerson,
  TripCountry,
  ReadMore,
  DescriptionContainer,
} from './styled';

export const HotOffersCarousel = ({ hotOffers }) => {
  const navigate = useNavigate();
  const { width } = useWindowDimensions();
  const navigateToTour = (id) => {
    navigate(`${ROUTES.HOT_TOURS}/${id}`);
  };

  return (
    <Swiper
      slidesPerView={width < 768 ? 2 : 1}
      spaceBetween={10}
      slidesPerGroup={width < 768 ? 2 : 1}
      loop={true}
      pagination={{
        dynamicBullets: true,
      }}
      modules={[Pagination, Navigation, Scrollbar, A11y]}
      className="mySwiper"
    >
      {hotOffers?.map((item) => (
        <SwiperSlide key={item.id}>
          <CardAndDescriptionBlock>
            <CardBlock>
              <CountryImage background={item?.main_image}>
                <TripDurationAndPrice>
                  <TripDuration>
                    {item?.stay_days} Days / {item?.stay_nights} nights
                  </TripDuration>
                  <PricePerPerson> $ {item?.price}/Person </PricePerPerson>
                </TripDurationAndPrice>
              </CountryImage>

              <TripCountryAndPrice>
                <CountryStarsPriceWrapper>
                  <TripCountryAndStars>
                    <TripCountry> {item?.title} </TripCountry>
                    <img src={Images.stars} />
                  </TripCountryAndStars>
                  <TripPrice>$ {item?.price} </TripPrice>
                </CountryStarsPriceWrapper>

                <DescriptionContainer
                  isMedia
                  dangerouslySetInnerHTML={{ __html: item.description }}
                />
                <ReadMore onClick={() => navigateToTour(item?.id)} isMedia>
                  Read More <img src={Images.mainColorRightArrow} />
                </ReadMore>
              </TripCountryAndPrice>
            </CardBlock>
            <CardDescription>
              <TripCountryAndStars>
                <TripCountry> Venice Italy </TripCountry>
                <img src={Images.stars} />
              </TripCountryAndStars>
              <DescriptionContainer
                dangerouslySetInnerHTML={{ __html: item.description }}
              />

              <ReadMore onClick={() => navigateToTour(item?.id)}>
                Read More <img src={Images.mainColorRightArrow} />
              </ReadMore>
            </CardDescription>
          </CardAndDescriptionBlock>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};