react slick slider not working in first render for responsive design

[hafiztblr]

 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