Swiper loop not working as intended for video carousel

I'm making a video carousel which loops each time it progressive bar reaches it end,the video plays perfectly, but the loop attribute in swiper doesn't seem to work, Here is the code

import { useRef, useEffect } from 'react';
import { Pagination, A11y, type Swiper as SwiperRef } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import ship from '../assets/videos/ship.mp4'
import highway from '../assets/videos/pexels-kelly-lacy-5473765.mp4'
import 'swiper/css';
import 'swiper/css/pagination';
const NewHome = () => {
return (
<Swiper
modules={[ Pagination , A11y]}
autoplay={{ delay: 5000}}
pagination={{ clickable: true }}
loop
className="w-1/2"
>
<SwiperSlide>
<video width="900" height="800" autoPlay muted loop>
<source src={ship} type='video/mp4'/>
</video>
</SwiperSlide>
<SwiperSlide>
<video src={highway} width="900" height="800"/>
</SwiperSlide>
</Swiper>
)
}
export default NewHome

CSS

.swiper-container {
width: 100%;
height: 200px;
}
.swiper-container + .swiper-container {
margin-top: 30px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 10rem;
height: 2px;
border-radius: 0;
position: relative;
overflow: hidden;
}
.swiper-pagination-bullet::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.swiper-pagination-bullet-active {
background: rgba(0, 0, 0, 0.4);
/* outline: 1px red solid; */
}
.swiper-pagination-bullet-active::before {
background-color: red;
-webkit-animation: slide-progress 2s cubic-bezier(0.3, 0, 0.3, 1) forwards;
animation: slide-progress 2s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.swiper-paused .swiper-pagination-bullet-active::before {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes slide-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

I tried adding a delay option to the autoplay but its still didn't work, I expect it switch to the next video after the progress bar of each slide reaches it end

The loop property of the Swiper component may not be working because the videos have their own loop attribute.
If you loop your videos they cannot trigger the Swiper component to move to the next slide.

Try removing loop from video and rely on Swiper component's loop:

<SwiperSlide>
<video width="900" height="800" autoPlay muted> // removed loop
<source src={ship} type='video/mp4'/>
</video>
</SwiperSlide>

Found the solution, so I forgot to import the Autoplay module from swiper and now it works perfectly fine

Note:
You'll also need to import the css file for the autoplay module in order to make it work