Not working with Swiper

[ollebergkvist]

I'm trying to use React-socks with Swiper, but the pictures don't render when wrapped within the max-width.

{/* Swiper mobile only */}
        {/* <Breakpoint customQuery="(max-width: 639px)"> */}
        <div className="w-full overflow-hidden">
          <div className="relative w-full">
            <Swiper
              style={{
                '--swiper-navigation-color': '#000',
                '--swiper-pagination-color': '#000',
              }}
              navigation={{}}
              pagination={{ clickable: true }}
              // eslint-disable-next-line tailwindcss/no-custom-classname
              className="custom-swiper h-96 rounded-2xl"
              loop={true}
            >
              {images}
            </Swiper>
          </div>
        </div>
{/* </Breakpoint> */}

Any ideas why it might break?