react slick slider not working in first render for responsive design

```
var settings = {
dots: false,
arrows: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
initialSlide: 0,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 0,
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 1,
}
}
]
};

```
Would it be possible to have initialSlide be 1 if the screen is less than 640px wide when the Slider first mounts? slidesToShow will correctly be 1 instead of 3, could we override initialSlide the same way. I want to fix this for both web and mobile. For the first render in the web 4 slides are coming. but when the screen size is below 1024, there are no slides coming in the first render