Simple Swiper Carousel List Overlapping Issue

Question

The problem is when i hover on top list item it doesn't overlap the bottom list but the bottom list item overlaps the top one when hovered I want the top list item to overlap everything including the bottom list Codepen is also available : https://codesandbox.io/s/spring-darkness-oiomj?file=/src/App.js:0-199

This is normal app component rendering list APP COMPONENT

import "./styles.css";
import List from "./components/list/List";

export default function App() {
  return (
    <div className="App">
      <List />
      <List />
      <List />
    </div>
  );
}

INDEX.css

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

This is list component list.jsx

import React from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import { Scrollbar, A11y } from "swiper";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
import SwiperCore, { Navigation, Autoplay, Virtual } from "swiper/core";
import ListItem from "./ListItem";
import classes from "./List.module.css"
SwiperCore.use([Navigation, Autoplay, Virtual]);
const List = () => {
  return (
    <div className={classes['container']}>
    <p>Popular on Netflix</p>
    <div>
      <Swiper
        modules={[Navigation, Scrollbar, A11y]}
        spaceBetween={2}
        slidesPerView={6}
        navigation={true}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log("slide change")}
        className={classes["swiper-wrapper"]}
      >
        <SwiperSlide  className={classes["swiper-slide"]}>
          <ListItem
         
            img={
              "https://image.tmdb.org/t/p/w500/ba7hnMx1HAze0QSJSNfsTBycS8U.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]} >
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/c3XBgBLzB9Sh7k7ewXY2QpfH47L.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/b5rOkbQ0jKYvBqBf3bwJ6nXBOtx.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/aNsrgElf0fiKBSR8cWWEL6XUTte.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/dueiWzWc81UAgnbDAyH4Gjqnh4n.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/hwNRc9ZWrakGdql22srY7DqtmRQ.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/trAOGwksvgHYNpbK4GewbjYQ1pi.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/zAIippNnm6o0gYEtjapbjQSxP8G.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/tNyJxHK3m7NAAKNYITLJ5oxS0YR.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/hMh1mR2kNl8kHjpIuPh4TICTwjo.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/c4EkF5JAZ83bUqNErhuSd9xw6uJ.jpg"
            }
           
          />
        </SwiperSlide>
        <SwiperSlide className={classes["swiper-slide"]}>
          <ListItem
            img={
              "https://image.tmdb.org/t/p/w500/79DgItjsyH5tpA3mC2xv5gU2zlZ.jpg"
            }
           
          />
        </SwiperSlide>
      </Swiper>
    </div>
  </div>
  );
}

export default List;

list.module.css

.container{
    width: 100vw;
    height: 12rem;
    overflow: visible;
    position: relative;
    overflow: visible;
    z-index: 100;
}
.swiper-wrapper{
    z-index: 100;
    overflow: visible;
}
.swiper-slide{
    width: 10rem;
    display: block;
z-index: 20;
overflow: visible;
object-fit: cover;

}
.swiper-slide img{
    width: 100%;
}
.swiper-slide:hover{
    transform: scale(4);
    z-index: 5000;
    top: 0;
    /* I want the top list image to overlap bottom list the z index is greater 
    of this hover but still not overlapping bottom list 
    but bottom list img overlapping top list
    */
}

listitem.jsx

import classes from "./ListItem.module.css"

const ListItem = ({ img}) => {
  return (
    <div className={classes["listItemContainer"]}>
    <img src={img} alt="img" />
  </div>
  );
}

export default ListItem;

listitem.module.css

.listItemContainer{
width: 15rem;
height: 12rem;
}