Breakpoints are very inconsistent

Sorry in advance, but could not replicate this issue since it seems to be specific to next.js and it has been occurring on a private client repo.

I have set breakpoints in my settings object up until 768 pixels where I pass unslick in the breakpoints settings like with normal slick. However, the carousel will always be present on page load even if the screen is larger than 768 pixels. In order to get it to unslick you must open dev tools, change the screen to be that exact size, then go back to fullscreen. Is there something I'm doing wrong here? I have tried the exact same settings with normal slick and do not get this issue.

`const settings = {
dots: true,
infinite: false,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: 'unslick',
},
{
breakpoint: 0,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: true,
},
},
],
}`

Edit: It seems more likely to be the 'unslick' param rather than the breakpoints themselves