我有一个使用 swiperjs 在 react 和 nextjs 项目中为评论编写的组件，但我收到一个错误，似乎来自这个评论组件，说 未处理的运行时错误 TypeError：无法读取未定义的属性（读取“includes”） 我不知道为什么，但是当我注释掉该组件中的所有代码时，一切似乎都正常工作。我也尝试过在 package.json 中升级 swiper，也尝试过降级 react，但错误不会消失。请帮我找出我使用以下代码可能做错了什么

components/Reviews.jsx

import React, { useRef, useState, useEffect }  from 'react'
import {ReviewForm} from '../components'
import { FaFacebookSquare, FaGithubSquare, FaTwitterSquare, FaInstagramSquare, FaYoutubeSquare } from 'react-icons/fa'
import {MdOutlineArrowForward} from 'react-icons/md'
import { getReviews } from '../services'  
import { Swiper, SwiperSlide } from "swiper/react";
import moment from 'moment'
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";


// import required modules
import { Pagination, Navigation } from "swiper";

const Reviews = () => {
  const [reviews, setReviews] = useState([]);

  useEffect(() => {
    getReviews()
      .then((newReviews) => setReviews(newReviews))
  }, [])

  return (
    <div className='reviewsBgBlack'>
      <div><h4 className="font-normal py-5 tracking-wide lg:text-5xl md:text-3xl text-center text-[#D72A06]">CLIENTS REVIEWS <span className='text-white'>ABOUT <br />THE QUALITY OF OUR WORK</span></h4></div>
    <Swiper
        slidesPerView={1}
        slidesPerGroup={1}
        spaceBetween={10}
        loop={false}
        loopFillGroupWithBlank={true}
        pagination={{
          clickable: true,
        }}
        breakpoints={{
          640:{
            slidesPerView:2,
            spaceBetween:10
          },
          768:{
            slidesPerView:3,
            spaceBetween:20
          },
          1024:{
            slidesPerView:3,
            spaceBetween:30
          }
        }}
        navigation={true}
        modules={[Pagination, Navigation]}
        className="mySwiper"
      >
        
      {reviews.map((review) => (
      <div key={review.name}>
        <div className="reviewsContainer">
          <div className="content">
            <SwiperSlide><div className="reviewCard">
            
              <div className="reviewCard-content">
                  <div className="image">
                    <img src="/logo.png" alt="" />
                  </div>
                  
                  <div className='media-icons'>
                    <i><a href={`https://www.instagram.com/${review.instagram}`}><FaInstagramSquare /></a></i>
                    <i><a href={`https://www.twitter.com/${review.twitter}`}><FaTwitterSquare /></a></i>
                    <i><a href={`https://www.facebook.com/${review.facebook}`}><FaFacebookSquare /></a></i>
                  </div>

                  <div className="name-profession">
                    <span className="name">{review.name}</span>
                    <span className='profession font-semibold'>{review.profession}</span>
                    <p className="text-gray-400 mb-2 font-semibold text-xs">{moment(review.createdAt).format('MMM DD, YYYY')}</p>
                    <span className="profession">{review.testimonial}</span>
                  </div>

                  <div className={`button ${review.casestudy ? `visible` : `hidden`}`}>
                    <button>view case study<span><MdOutlineArrowForward className='mt-1 text-lg ml-2'/></span></button>
                  </div>
              </div>
              
              </div>
            </SwiperSlide>

          </div>
        </div>
      </div>
      ))}
    </Swiper>
    <ReviewForm />
    </div>
  )
}

export default Reviews

控制台错误

next-dev.js?3515:20 The above error occurred in the <Swiper> component:

    at eval (webpack-internal:///./node_modules/swiper/react/swiper.js:43:98)
    at div
    at Reviews (webpack-internal:///./sections/Reviews.jsx:38:62)
    at div
    at div
    at Home (webpack-internal:///./pages/index.jsx:29:23)
    at Layout (webpack-internal:///./components/Layout.jsx:11:26)
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:23:64)
    at MyApp (webpack-internal:///./pages/_app.tsx:24:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:215:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:406:27)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.