I got this Swiper error while I was testing Swiper. Can someone help me fix it?
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const Swiper1: React.FC = () => {
return (
<Swiper
spaceBetween={30}
centeredSlides={true}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
pagination={{
clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
className="mySwiper">
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
//More, saving space for the error
</Swiper>
);
};
export default Swiper1;
TS2322: Type '{ children: Element[]; spaceBetween: number; centeredSlides: boolean; autoplay: { delay: number; disableOnInteraction: boolean; }; pagination: { clickable: boolean; }; navigation: boolean; modules: any[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'.
Property 'spaceBetween' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps'.
8 | return (
9 | <Swiper
> 10 | spaceBetween={30}
| ^^^^^^^^^^^^
11 | centeredSlides={true}
12 | autoplay={{
13 | delay: 5000,
I tried to search the problem on google,chatgpt and other websites. I updated the TS vers in my project to v5.1.6 and I asked for help on reactjs discord server. I was expecting to get a response to my error,but not luck...