Por favor vea el siguiente código. Cuando hago clic en el ícono derecho, me da el doble del valor de la propiedad actual de los ganchos useState. Ahora no puedo arreglar eso. ¿Puedes decirme cómo arreglar esto?

 import React, { useState } from "react"; import { SliderData } from "./SliderData"; import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from "react-icons/fa"; const ImageSlider = (slides) => { const [current, setCurrent] = useState(0); const length = slides.length; console.log(current); const nextSlide = () => { setCurrent(current === length - 1 ? 0 : current + 1); }; const prevSlide = () => { setCurrent(current === 0 ? length - 1 : current - 1); }; // if (!Array.isArray(slides) || length <= 0) { // return null; // } return ( <section className="slider"> <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} /> <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} /> {SliderData.map((slide, index) => { return ( <div className={index === current ? "slide active" : "slide"} key={index} > {index === current && ( <img src={slide.image} alt="this is image" className="image" /> )} </div> ); })} </section> ); }; export default ImageSlider;