How to make an action on slide change with react-slick?

Question

I'm trying to make an Instagram clone and in the stories page when the user changes the current story to another one I need to change the state value to the another one's stories so always the active slide shows the stories which the state have its data .

I tried to use slideChangeHooks that react-slick provided them but i couldn't add any extra actions to the main one which is changing the center slide, so if i added something to the function the slider won't work correctly and won't change the center slide

  class CenterMode extends Component {
    state = {
      activeSlide: 0,
      activeSlide2: 0,
    };
    render() {
      const settings = {
        dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 5,
        slidesToScroll: 1,
        centerMode: true,
        draggable: false,
        focusOnSelect: true,
        easing: "ease-in",
        arrows: false,
        centerPadding: "40px",
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 1.5,
              centerPadding: "20px",
            },
          },
        ],
        beforeChange: (current, next) => {
          this.setState({ activeSlide: next });
        },
        afterChange: (current) => {
          this.setState({ activeSlide2: current });
          // setShow({
          //   storyIndex: current,
          //   newStories: data[current].stories.map((item) => !item.seen && item),
          // });
        },
      };

      return (
        <Slider {...settings}>
          {data.map((item, index) => {
            let theSrc = "";
            for (let i = 0; i < item.stories.length; i++) {
              if (!item.stories[i].seen) {
                theSrc = item.stories[i].story.src;
                break;
              }
            }
            if (theSrc != "")
              return (
                <Box
                  sx={{
                    p: { lg: "30px", xs: "50px 30px" },
                    boxSizing: "border-box",
                    backgroundColor: "transparent",
                  }}
                  key={index}
                >
                  <Paper variant="plain" sx={{ overflow: "hidden" }}>
                    <img
                      src={
                        // show.storyIndex != index
                        // ?
                        theSrc
                        // : show.newStories[0].story.src
                      }
                      alt={item.user}
                    />
                  </Paper>
                </Box>
              );
            else return;
          })}
        </Slider>
      );
    }
  }

so I commented the setShow which making the error .

Can you help me please .

If there is a better way to make the story change I hope you suggest me .

I tried to change the state value in the beforeChange function and afterChange function , and no one of them worked correctly so the states of the slide ( activeSlide, activeSlide2 ) didn't change their values , to be more accurate if i put it in beforeChange the slider won't move at all , if i put it in afterChange the slider will go to the other story and get back to the first one so the activeSlide2 doesn't change its value .

I hope I made it clear