Consistency issue in react-slick

Question

When we try to give more than 12 images in a react-slick slider, the images will appear and immediately disappears. How do I resolve this consistency issue using react-slick. I have used the below link to do this.

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>