Estoy usando swiperjs y tengo dificultades para hacer las diapositivas, ya que no se ajustan a la siguiente diapositiva y no puedo obtener el índice activo de ellas. Este es mi código.
¿Dónde me estoy equivocando? Estoy usando TypeScript y Swiperjs versión 6.84 con el marco iónico.

 import 'swiper/components/navigation/navigation.min.css' import 'swiper/components/pagination/pagination.min.css' const pagination = { clickable: true, }; return ( <IonPage> <Swiper pagination={pagination} onBeforeSlideChangeStart={e => { setIndex(e.activeIndex) }}> <SwiperSlide > <item property={property} index={0} save={dispatch} activeIndex={index} /> </SwiperSlide> <SwiperSlide > <item 2 property={property} index={1} /> </SwiperSlide> <SwiperSlide > <item3 property={property} index={1} /> </SwiperSlide> </Swiper> <IonButton disabled={true} onClick={(e) => { e.preventDefault(); }} className={"next"} expand={"block"} > Save </IonButton> </IonPage> ); }