title: Swiper 7 cant get modules to work (pagination)
body: <p>Im trying to use Swiper React and cant get the Swiper modules working (specifically the pagination).</p>
  <p>Swiper Version: 7.0.8</p>
  <p><strong>Code</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Pagination } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/react';
  import React, { FC } from "react";
  
  import css from "./sideScrollSlider.module.scss";
  
  import "swiper/swiper.scss";
  import "swiper/components/pagination/pagination.scss";
  
  export interface ISideScrollSlider {}
  
  const SideScrollSlider: FC&lt;ISideScrollSlider&gt; = ({
  }) =&gt; {
      return (
          &lt;div className={css.wrapper}&gt;
  
              &lt;Swiper
                  modules={[Pagination]}
                  className={css.swiperWrapper}
                  spaceBetween={16}
                  pagination={{ clickable: true }}
                  loop={true}
                  loopAdditionalSlides={2}
                  createElements={true}
              &gt;
  
                  &lt;SwiperSlide&gt;
                      &lt;div className="p-12 bg-gray-200"&gt;
                          &lt;div className={css.slideWrapper}&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/SwiperSlide&gt;
                  &lt;SwiperSlide className={css.SwiperSlide}&gt;
                      &lt;div className="p-12 bg-gray-200"&gt;
                          &lt;div className={css.slideWrapper}&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/SwiperSlide&gt;
                  &lt;SwiperSlide className={css.SwiperSlide}&gt;
                      &lt;div className="p-12 bg-gray-200"&gt;
                          &lt;div className={css.slideWrapper}&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/SwiperSlide&gt;
  
              &lt;/Swiper&gt;
          &lt;/div&gt;
      );
  };
  
  export default SideScrollSlider;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/9df9W.png" rel="nofollow noreferrer">Here is the output</a></p>
  <p>Ive also noticed that the modules prop is rendered into the DOM, which might be a hint to the issue.</p>
  <p>Does anyone know a solution to this?</p>