Code from VS Code
Code from Chrome Inspect Window

As you can see on the first image <div className="polygon-3-sm bg-gradient-radial w-11/12 h-[150px] relative rounded-sm mx-auto mt-4 order-first"> should be first than <SwiperSlide key={key}> when the component rendered, but actually, as you can see on the second image, <SwiperSlide key={key}> is placed on the above of <div className="polygon-3-sm bg-gradient-radial w-11/12 h-[150px] relative rounded-sm mx-auto mt-4 order-first">

I am using Swiper(swiper/react) in my Next.js app and stuck with this problem
Does anyone have same experience and how did you solve this problem?

I want the red part should be placed on the green part.