Please see the below code. When I click the right icon it gives me twice the value of current property of useState hooks. Now I can't fix that. Can you please tell me how to fix this?

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;