NextJs and react-slick strange behavior

[MirceaCapa]

Hi. Do you know about an issue regarding nextJs and react-slick compatibility? I'm trying to implement a react-slick sync slider in my project but it just behaves strangely. 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. Here's 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 (

<Slider asNavFor={nav2} ref={slider1} {...contentSliderSettings}>
{items.map((t, index) => (
<>

{t.content}

</>
))}

<Slider asNavFor={nav1} ref={slider2} {...imagesSliderSettings}>
{items.map((t, index) => (

<img
src={t.img}
width="75"
height="75"
style={{ borderRadius: "50%" }}
/>

))}

);
};
export default ReactSlickComponent;
`

codesandbox code

Thank you in advance!

[shuvro111]

@MirceaCapa Hey! can you please share the video again? This link doesn't seem to be working. ( https://streamable.com/kz926z )