Проблема согласованности в реакции-пятно

Question

Когда мы пытаемся дать более 12 изображений в скользящем слайдере, изображения появятся и сразу исчезнут. Как я могу решить эту проблему согласованности с помощью response-slick. Я использовал ссылку ниже, чтобы сделать это.

https://github.com/akiran/react-slick

   this.settings = {
       dots: false,
       infinite: false,
       speed: 500,
       slidesToShow: 5,
       slidesToScroll: 4,
       initialSlide: 0,
       responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
                initialSlide: 2
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
       ]
    }
    <Grid item xs={11}>
       <div className="padding-container">
           <Slider {...this.settings}>
             {this.props.children}
           </Slider>
       </div>
    </Grid>