how to use buttons with the onClick method in the latest nextJS version 14.1.3

"use client"
import React, { useState } from "react";
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";

export default function HeroSlider() {
  const images = [
    "/images/homepage/home-1.jpeg",
    "/images/homepage/home-2.jpg",
    "/images/homepage/home-3.jpg",
    "/images/homepage/home-4.jpg",
    "/images/homepage/home-5.jpg",
    "/images/homepage/home-6.jpg",
    "/images/homepage/home-7.jpg",
  ];
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const nextImage = () => {
    setCurrentImageIndex((nextIndex) =>
    nextIndex === images.length - 1 ? 0 : nextIndex + 1
    );
  };

  const prevImage = () => {
    setCurrentImageIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    <div>
      <div style={{ position: "relative", width: "100%", height: "auto" }}>
        <img
          src={images[currentImageIndex]}
          alt="Your Image"
          style={{ width: "100%", height: "auto", objectFit: "cover" }}
        />
        <div
          style={{
            width: "5%",
            position: "absolute",
            top: "50%",
            left: "0",
            transform: "translateY(-50%)",
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={prevImage}
            className="absolute top-1/2 left-0 transform -translate-y-1/2 bg-transparent border-none"
          >
            <FaChevronLeft size={40} color="white" />
          </button>
        </div>
        <div
          style={{
            width: "5%",
            position: "absolute",
            top: "50%",
            right: "0",
            transform: "translateY(-50%)",
            zIndex: 1,
          }}
        >
          <button
            type="button"
            onClick={nextImage}
            className="absolute top-1/2 right-0 transform -translate-y-1/2 bg-transparent border-none"
          >
            <FaChevronRight size={40} color="white" />
          </button>
        </div>
      </div>
    </div>
  );
}

why do the nextImage and prevImage functions not work?

I’m making a slider hero component, so I applied the use state concept, and created the nextImage and prevImage functions to change the useState value via the button with the onClick method, but why isn’t that function called? Can anyone help me here?