Карусель slick-react ставит слайды в колонну и не реагирует на изменение стилей

Изображения почему-то отображаются в колонну. Попробовала задать расположение в 1 ряд (rows:1), пробовала через css выставить в ряд через flex. Ничего не помогло.. Может у кого-то был опыт "react-slick"

    const settings = {
        slidesToShow: 3,
        slidesToScroll: 1,
        variableWidth: false,
        initialSlide: 0,
        rows: 1,
        arrows: false,
        infinite: false,
        autoplay: false,
        beforeChange: (current: number, next: number) => {
          setIsPrevDisabled(next === 0);
          setIsNextDisabled(next === 6);
        },
      };

<div className={css.sliderBlock}>
      <div className={css.slickList}>
        <div className={css.btnWrap}>
          <button
            className={css.prevBtn}
            onClick={handlePrevClick}
            disabled={isPrevDisabled}
          >
            Previous
          </button>
          <Slider {...settings} ref={(slider) => (slickSlider = slider)}>
            {items.items.map((item: IGalleryItem, index: number) => (
              <div key={index} className={css.slickSlide}>
                <img src={item.image} alt={item.alt} width={300} height={500} />
                <p>{index}</p>
              </div>
            ))}
          </Slider>
          <button
            className={css.nextBtn}
            onClick={handleNextClick}
            disabled={isNextDisabled}
          >
            Next
          </button>
        </div>
      </div>
    </div>```