First page of the carousel doesn't display when page is refreshed on smaller view-ports

I have started to experience an issue when adjusting the slides to mobile. If I refresh the page of the highest width, it will work fine but if I simulate a smaller view-port and refresh the page, it will not display the first page of the slide, and when clicking on an arrow, it will skip the first page and just straight to the second page.

Desktop:

Any smaller view-port:

I have a component that holds the slider with the following settings:

```javascript
const settings = {
dots: true,
infinite: false,
draggable: false,
slidesToShow: 8,
slidesToScroll: 8,
initialSlide: 0,
lazyLoad: 'progressive',
nextArrow: (



),
prevArrow: (



),
responsive,
}
```

The `responsive` is passed via props, and it's as follows:

```javascript
export default [
{
breakpoint: 1920,
settings: {
slidesToShow: 8,
slidesToScroll: 8
}
},
{
breakpoint: 1792,
settings: {
slidesToShow: 7,
slidesToScroll: 7
}
},
{
breakpoint: 1492,
settings: {
slidesToShow: 6,
slidesToScroll: 6
}
},
{
breakpoint: 1280,
settings: {
slidesToShow: 5,
slidesToScroll: 5
}
},
{
breakpoint: 1080,
settings: {
slidesToShow: 4,
slidesToScroll: 4
}
},
{
breakpoint: 720,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 560,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}
];
```

If the `responsive` array has only one object, it will not occur, but as soon as there are two, it will.