Swiper Grid doesn't work as expected in order.

[strongphoenix]

I am using React.js, swiper to make slider.
Total items are 5 and I want to show 2 items in per page.
But it shows all items in the first page.
And second, third page is empty.

Expected result:

Current result:

Here is my code.

<Swiper
            ref={swiperRef}
            spaceBetween={0}
            allowTouchMove={true}
            touchMove={true}
            grid={{
              // fill: 'row',
              rows: 2,
            }}
            pagination={{
              type: 'fraction'
            }}
            className="mySwiper"
            modules={[Grid, Pagination]}
            onInit={(swiper) => {
              setPagination(swiper?.pagination?.el?.outerText)
            }}
            onSlideChange={onChangeSlider}
          >
            {results?.map((item, index) => (
              <SwiperSlide key={index}>
                <div>{index + 1}</div>
              </SwiperSlide>
            ))}
          </Swiper>

How to fix this?
Swiper version: 11.0.4
React version: 18

[maryma00012]

have you tried to add the fill?
grid={{
fill: 'row',
rows: 2,
}}