swiper.js中的react中的多行滑动不起作用

import React from 'react';
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

const MultiRowSlider = () => {
  React.useEffect(() => {
    new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 10,
      slidesPerGroup: 1,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  }, []);

  return (
    <div className="swiper-container">
      <div className="swiper-wrapper">
        <div className="swiper-slide">Slide 1</div>
        <div className="swiper-slide">Slide 2</div>
        <div className="swiper-slide">Slide 3</div>
        {/* 更多的轮播图项 */}
      </div>
      <div className="swiper-pagination"></div>
    </div>
  );
};

export default MultiRowSlider;