NextJs and react-slick strange behaviour

I'm working on a next js project and I want to implement react-slick slider sync using asNavFor propriety. Here is my code:

`import React, { useEffect, useRef, useState } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

// Material UI
import { Grid } from "@material-ui/core";

const ReactSlickComponent = () => {
const [state, setState] = useState({
nav1: null,
nav2: null
});

const items = [
{
content: "Some content",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content1",
img:
"https://images.unsplash.com/photo-1667507035835-8a1eefbb259a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fHRvd0paRnNrcEdnfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content2",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content3",
img:
"https://images.unsplash.com/photo-1665281871376-3145b147a7a9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDIwfHRvd0paRnNrcEdnfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content4",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content5",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content6",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content7",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
},
{
content: "Some content8",
img:
"https://images.unsplash.com/photo-1667514044945-4269b55e43aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDV8dG93SlpGc2twR2d8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
}
];

const slider1 = useRef();
const slider2 = useRef();

useEffect(() => {
setState({
nav1: slider1.current,
nav2: slider2.current
});
}, []);

const { nav1, nav2 } = state;

const contentSliderSettings = {
arrows: false,
dots: false,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
adaptiveHeight: items && items.length >= 9,
responsive: [
{
breakpoint: 650,
settings: {
infinite: items && items.length > 4
}
}
],
className: "no-dots"
};

const imagesSliderSettings = {
centerMode: true,
accessibility: true,
arrows: true,
dots: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
focusOnSelect: true,
adaptiveHeight: true,
responsive: [
{
breakpoint: 650,
settings: {
infinite: items && items.length > 4,
slidesToShow: 4
}
}
]
};

return (

{items.map((t, index) => (
<>

{t.content}

))}


{items.map((t, index) => (



))}

export default ReactSlickComponent;
`

[codesandbox code](https://codesandbox.io/s/react-slick-demo-forked-5kitix?file=/src/App.tsx)

Somehow this code works perfectly on codesandbox and on React app (I tried this on a real project build with create-react-app and works as I expected) but my Next Js project has this behavior: https://streamable.com/kz926z. I don't know what I'm missing or what I'm doing wrong here. Any help would be highly appreciated.

I know that infinite: false fixed this issue but I want that the slider to have an infinite loop behavior.

Sorry if this is not an issue but honestly I don't know where to ask this question better than in this repo.

Thank you in advance!