Swiper.js centeredSlides with loop not showing next slides on mobile

I'm using Swiper.js with centeredSlides: true and loop: true on mobile. I want the current slide centered and the previous/next slides partially visible (about 20% on each side).

Currently, the first slide is visible, but the next slides do not appear by default. If I manually drag or change slides, the first two slides work, but subsequent slides do not show.

Here’s what I need:

Center the active slide.

Show part of the previous/next slides on the sides (20%).

Loop through all slides without skipping or hiding any.

How can I achieve this in Swiper.js?

            <Swiper
              onBeforeInit={(swiper) => {
                swiperRef.current = swiper;
              }}
              modules={[Autoplay, FreeMode]}
              slidesPerView={4}
              loop={true}
              speed={600}
              centeredSlides={true}
              autoplay={{
                delay: 3000,
                disableOnInteraction: false,
                pauseOnMouseEnter: false,
              }}
              breakpoints={{
                0: {
                  slidesPerView: 1.6,
                  centeredSlides: true,
                },
                640: {
                  slidesPerView: 2,
                  centeredSlides: false,
                },
                1024: {
                  slidesPerView: 3,
                  centeredSlides: false,
                },
                1280: {
                  slidesPerView: 4,
                  centeredSlides: false,
                  loop: false,
                },
              }}
              className="category-swiper !overflow-visible"
            >
              {categories.map((cat, idx) => renderCategoryCard(cat, idx))}
            </Swiper>