slideToShow не отображает указанное количество столбцов

Question

Я использую реагировать на рендеринг элементов из массива. Длина моего массива равна 4, и каждый элемент массива содержит вложенный массив, и я указал 4 в slideToShow, а в 4 в slideToScroll. Внутри 4 столбцов он показывает мне 3 столбца. Ниже приведен мой код.

const settings = {
  arrows: false,
  infinite: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,  
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    },
    {
      breakpoint: 780,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
};

 <Slider {...settings} ref={slider => this.slider = slider}>
      {
        array_groups.map((item, index) =>
        <div key={index}>
          {
            item.map((subItem, subIndex) => 
              <div key={subIndex}>{subItem.title}
              </div>)
          }
        </div>)
      }
 </Slider>

Может кто-нибудь, пожалуйста, скажите мне, почему он показывает 3 столбца вместо 4.

Примечание: массив array_groups содержит 4 элемента массива. Создает 4-й столбец, но не показывает его.