SwiperSlide components do not appear when the Swiper is being swiped

I just installed SwiperJs in my project and copied the code from the docs. But the images, that I'm supposed to swipe to see, are all hidden expect for the first one. When I swipe, the content of the Swiper becomes white, but the components, whith the right images urls, do appear in the inspector.

Here's my code :

import "./styles.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
const picturesData = [
  "https://s1.qwant.com/thumbr/474x355/9/c/d04da36fa6514683e4f28b1af1eec6b12caf9afa325d6c5fa63594b4ee8bb6/th.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%3Fid%3DOIP.DQQvjgN8K2-7UV2g2CrnjwHaFj%26pid%3DApi&q=0&b=1&p=0&a=0",
  "https://s2.qwant.com/thumbr/474x474/6/7/8ecfe76ab151109b6d09c817e53af064fa9112084cd9abf283d3cb69cdffd7/th.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%3Fid%3DOIP.xklM3kSc5GdzZ5N_w54vaQHaHa%26pid%3DApi&q=0&b=1&p=0&a=0",
  "https://s1.qwant.com/thumbr/474x266/a/6/18d93d8fd9d37a7b0a9b5b3a3112ce4cc90ede3d7f39c8bb5aae36f677122a/th.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%3Fid%3DOIP.3hUwEcr8mssPw6qhMeAEQwHaEK%26pid%3DApi&q=0&b=1&p=0&a=0",
];

export default function App() {
  const year = 2025;
  return (
    <div className="App">
      <section>
        <h2>{year}</h2>
        <Swiper
          spaceBetween={50}
          slidesPerView={1}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
          modules={[Navigation, Pagination]}
          pagination={{ clickable: true }}
        >
          {picturesData.map((singleImage, index) => {
            return (
              <SwiperSlide>
                <img src={singleImage} alt={"picture"} key={index} />
              </SwiperSlide>
            );
          })}
        </Swiper>
      </section>
    </div>
  );
}

Since this problem does not appear in the docs, in the issues or here, I guess that I'm doing something basic wrong. I created a CodeSandBox with this exact code and it works. On the other hand, I deleted all of my code and put those lines directly in my App.tsx file and it doesn't work. It's driving me insane right now.

Any idea what might be causing this ?

I've just found the cause of the issue : I have a reset CSS that I use on all my projects. Here, the overflow-x: hidden; on the div tags caused the problem with the Swiper package. Removing the div tag from my reset solved the issue while not creating other problems.