React-Slick - transform: translate3d - Not working on smaller resolutions - css

Question

I am using next.js and fetching data via API to slides. React-slick works great until the first break point on lower resolution (890px in this example).
.slick-track class has a property that is causing this problem.
.slick-track {transform: translate3d((wrong calc here)px, 0px, 0px)}
So instead 0px on first value inside translate 3d I'm getting value that is width of element where the list of slides should be shown. And List is moved to right so it cant bee seen.
After click on next button, list is coming to its normal place, but skipping first element in list...
Screenshot:
I have tried to overwrite this property inside module.css via :global and inside base CSS file, but it is still applied. I i put !important at end of my property it will be applied but I wont be able to scroll/navigate through elements of slide (first element will be stuck to left).
I also have tried older versions of react-slick 26.0; 26.1; 27.0; 28.0... But problem is still here.
Does anyone has some idea for solution?
Here is my component:
const Accessories = () => {
const { query } = useRegions();
const { error, data } = useAccessoriesSubcategoriesQuery({
variables: { ...query },
});
if (error) {
console.error("Accessories section component error", error.message);
}
const subcategoryItems = data?.categories.edges[0].node.children.edges || [];
// Slick slider settings
const settings = {
dots: false,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
nextArrow: <AccessoriesNextBtn currentSlide={0} slideCount={0} />,
prevArrow: <AccessoriesPrevBtn currentSlide={0} slideCount={0} />,
responsive: [
{
breakpoint: 890,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 620,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 420,
settings: {
slidesToShow: 1,
},
},
],
};
return (
<div className={"flex items-center justify-center w-full h-full bg-white"}>
<Container className="flex-col relative overflow-hidden">
<div className="flex flex-col lg:flex-row w-full mb-[50px] gap-[30px] lg:gap-[20px] justify-between">
<H2Headline className="text-[26px] text-left ">
Pool equipment & water treatment
</H2Headline>
<Button
className={`${styles.accessoriesSeeAllBtn} mb-[50px] mr-[0px] ml-auto xs:mb-0 xs:ml-0 xs:mr-auto max-w-[112px] h-[45px] box-border text-solidGray font-semibold text-[16px] leading-[157%] bg-white border border-solidGray hover:bg-solidGray hover:text-white`}
>
{/* <LinkBuilder linkItem={data?.categories.edges[0].node}>See all</LinkBuilder> */}
See All
</Button>
</div>
<div className={`${styles.accessoriesSliderWrapper} md:min-w-[500px] w-full`}>
<style jsx global>{`
.slick-track {
display: block;
transform: translate3d(0px, 0px, 0px);
}
`}</style>
<Slider {...settings}>
{subcategoryItems.map((item) => (
<div
key={item?.node.id}
className="flex flex-col max-w-[366px] md:max-w-[263px] transform hover:-translate-y-3 duration-500 ease-in-out "
>
{item.node.backgroundImage ? (
<div className="flex justify-center items-center content-center h-[280px] bg-lightGray rounded-[12px] overflow-visible z-50">
<Image
src={item.node.backgroundImage?.url}
width={218}
height={218}
alt="Category image"
className="object-cover object-center w-auto h-auto"
placeholder="blur"
blurDataURL={item.node.backgroundImage?.url}
/>
</div>
) : null}
<h3 className="text-solidGray text-[16px] leading-[160%] font-medium mt-[12px] mb-[3px]">
{item.node.name}
</h3>
<ParagraphText className="text-[14px] text-gray opacity-100 mt-[3px] mb-[12px]">
{item.node.description}
</ParagraphText>
<Button className="mx-auto text-[14px] border border-lightGray bg-white w-full hover:bg-solidGray hover:border-solidGray hover:text-white">
<LinkBuilder linkItem={item}>See all</LinkBuilder>
</Button>
</div>
))}
</Slider>
</div>
</Container>
</div>
);
};