Owl carousel show double image in responsive settings items:1 in mobile

<div class="owl-carousel owl-theme pt-16 xxl:pt-20 h-full" id="carousel8">
       <div class="group flex justify-around items-center centerwrap">
         <div class="centerwidth">
            <Img class="object-cover w-full" src="images/car/carslide1.png"></Img>
         </div>
         /* other content stuff */         
       </div>
       <div class="group flex justify-around items-center centerwrap">
         <div class="centerwidth">
            <Img class="object-cover w-full" src="images/car/carslide1.png"></Img>
         </div>
         /* other content stuff */         
       </div>
       <div class="group flex justify-around items-center centerwrap">
         <div class="centerwidth">
            <Img class="object-cover w-full" src="images/car/carslide1.png"></Img>
         </div>
         /* other content stuff */         
       </div>
    </div>

`owl-item.center .centerwrap given height 50rem , owl-item
.centerwidth image container width given 50% owl-item.center
.centerwidth given 100% width .. everythings fine but when , items:1
configuration gives in mobile view it show double image like provided
image example..