react-multi-carousel displays with gap on the right side

Question

Here is how it displays: I added the Carousel with next parameters:

      <Carousel
        additionalTransfrom={0}
        autoPlaySpeed={3000}
        centerMode={false}
        className=""
        containerClass="container"
        dotListClass=""
        draggable
        focusOnSelect={false}
        infinite
        itemClass={styles['slider-item']}
        keyBoardControl
        minimumTouchDrag={80}
        partialVisible
        renderButtonGroupOutside
        renderDotsOutside={false}
        responsive={{
          desktop: {
            breakpoint: {
              max: 3000,
              min: 1024,
            },
            items: 3,
            partialVisibilityGutter: 40,
          },
          mobile: {
            breakpoint: {
              max: 464,
              min: 0,
            },
            items: 1,
            partialVisibilityGutter: 30,
          },
          tablet: {
            breakpoint: {
              max: 1024,
              min: 464,
            },
            items: 2,
            partialVisibilityGutter: 30,
          },
        }}
        showDots={false}
        arrows={false}
        sliderClass=""
        slidesToSlide={1}
        swipeable
        customButtonGroup={
          <CustomButtonGroupAsArrows
            title={title}
            seeAllCount={seeAllCount}
            seeAllLink={seeAllLink}
          />
        }
      >
        {items.map((item, i) => (
          <SliderItemWrapper key={i}>{item}</SliderItemWrapper>
        ))}
      </Carousel>

SliderItemWrapper is the simple div.

I guess the problem might be in the totalItems property inside carouselState, because it calculates children items count randomly. I have tried different configurations, but faced the same issues with all of them.