I am creating a slider where when I press the prev or next button the image should enter with a transition effect. The issue is that the transition works only when the page first loads and does not work after the first render. I need the transitions to work on each click and the transitions are applied to the section element class. If anyone know the solution please help me.

const SlideShowTop = (props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const previous = () => {
    if (selectedIndex !== 0) {
      setSelectedIndex((index) => index - 1);
    }
    if (selectedIndex === 0) {
      setSelectedIndex(props.slides.length - 1);
    }
  };

  const next = () => {
    if (selectedIndex !== props.slides.length - 1) {
      setSelectedIndex((index) => index + 1);
    }
    if (selectedIndex === props.slides.length - 1) {
      setSelectedIndex(0);
    }
  };

  const filteredSlide = props.slides.filter((data) => {
    return data.index === selectedIndex;
  });

  const sliderList = filteredSlide.map((slideProp, index) => {
    const getImg = require("../assets/" + slideProp.picture).default;
    return (
      <section className={classes.transitions}>
//to this section applying the transition

        <li
          className={`${[classes.banner]} `}
          style={{
            backgroundImage: `url(${getImg})`,
          }}
        >
          <div className={classes.banner__contents}>
            <h1 className={classes.banner__title}>
              {props.slides[selectedIndex].title}
            </h1>
            <div className={classes["ty-seqHomeSlider-nav"]}>
              <button
                onClick={previous}
                type="button"
                class={classes["seq-prev"]}
              >
                <i
                  className="fa fa-angle-left"
                  style={{ color: "white" }}
                  aria-hidden="true"
                ></i>
              </button>
              <button onClick={next} type="button" class={classes["seq-next"]}>
                <i
                  className="fa fa-angle-right"
                  style={{ color: "white" }}
                  aria-hidden="true"
                ></i>
              </button>
            </div>
            <h1 className={classes.banner__description}>
              {props.slides[selectedIndex].overview}
            </h1>
          </div>
          <div className={classes.banner_fadeBottom}></div>
        </li>
      </section>
    );
  });

  return (
    <div>
      <ul>{sliderList}</ul>
    </div>
  );
};

export default SlideShowTop;