swiperjs two swiper-wrapper inside one container bug

Solution for swiperjs two swiper-wrapper inside one container bug
is Given Below:

I am using swiper.js in NextJS but I keep getting this <div class="swiper-wrapper" style="height: 308px;"></div> inside my swiper container two times, which makes that I have a 308px height div for nothing.

this is my swiperjs config

  <Swiper
            slidesPerView={"auto"}
            spaceBetween={30}
            autoHeight
            freeMode={true}
            freeModeSticky
            watchSlidesVisibility={true}
            preloadImages={false}
            resizeObserver={true}
            lazy={true}
          >
            <div className="swiper-wrapper">
              {data.map((data: data) => (
                <Card
                  data={data}
                  swiper
                  key={data.id}
                />
              ))}
            </div>
          </Swiper>

and my Card parent wraps it like this

<SwiperSlide virtualIndex={data.id} className={`${outderdiv}`}></div>

does anyone know how to remove the first weird div that show nothing?

thx in advance