React Slick add & remove class to active li through iteration

My settings:
const settings = {
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
useCSS: 1,
autoplaySpeed: 1000,
appendDots: dots => (

{dots}


I have been trying for days to do this. It works with Vanilla javascript but not in Nextjs. I want the active li to have slick-active class + Active-class-n

I'm new to Nextjs and React. Is there a way to add class(Active-class-n) to li after clicking on dots(1,2,3,4) and remove Active-class-n if clicked on previous button and remove all classes when clicked on the first button..

Javascript Demo: (Inspect the li for result)
https://jsfiddle.net/opagqs1m/1/