Estoy creando un control deslizante donde, cuando presiono el botón anterior o siguiente, la imagen debe ingresar con un efecto de transición. El problema es que la transición solo funciona cuando la página se carga por primera vez y no funciona después del primer procesamiento. Necesito que las transiciones funcionen en cada clic y las transiciones se aplican a la clase de elemento de sección. Si alguien sabe la solución por favor que me ayude.

 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;