React中使用swiper6配置了自动播放参数，但是不能自动播放，请问是什么原因？代码如下：

import React from 'react';
import styles from './carousel.module.scss';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectFade } from 'swiper';
import 'swiper/swiper-bundle.css';
import 'swiper/components/effect-fade/effect-fade.scss';
SwiperCore.use([EffectFade]);

const mockData = [
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  },
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  },
  {
    "title":"标题1",
    "description":"描述1",
    "slideMobileImg":"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/147963/22/2503/175676/5f085783Eaa4d79c7/5e1bf6f0c87780ea.jpg!cr_1125x445_0_171!q70.jpg.dpg",
    "showButton":true,
    "buttonLink":"/doc"
  }
]
export default class Carousel extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 0
    }
  }
  render() {
    const list = mockData
    return (
      <Swiper effect="fade"
              autoplay={{delay: 5000}}
              pagination={{ clickable: true }}>
        {
          list.map((item, index) => {
            return (
              <SwiperSlide className='swiper-slide' key={item.slideMobileImg + index}>
                ![]({item.slideMobileImg} style={{width: )
                <div className={styles['slide-text']}>
                  <p className={styles['slide-title']}>{item.title}</p>
                  <p className={styles['slide-desc']}>{item.description}</p>
                </div>
              </SwiperSlide>
            )
          })
        }
      </Swiper>
    )
  }
}

不是这样用的，就跟你用EffectFade一样需要注入的，你试试 应该有这个模块