Mybutton prev and next is not working | Next js Owl Carousel

I can’t use my button prev and next, how do i get the button to work.

This my code

export const Slider = () => {
  const carouselRef = useRef(null);

  const handlePrev = () => {
    carouselRef.current.prev();
  };

  const handleNext = () => {
    carouselRef.current.next();
  };

  const options = {
    responsive: Responsive,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    autoplayHoverPause: true,
    dots: true,
    nav: true,
    navText: ["<", ">"],
  };

  return (
    <div className=' items-center justify-center content-center flex flex-row py-44'>
      <button onClick={handlePrev}>prev</button>
      <div className='mx-auto w-5/6'>
        <OwlCarousel ref={carouselRef} {...options}>
          {images.map((item, index) => (
            <div
              key={index}
              className='bg-white shadow-lg rounded-xl overflow-hidden md:m-5 m-3 md:p-6 px-2 py-3'>
              <div className='h-36 flex flex-col items-center justify-center text-center'>
                <img src={item.images} className='object-contain h-full' />
                <div className='w-full'>
                  <h2 className='title-font font-semibold text-lg text-green-400'>
                    {item.name}
                  </h2>
                  <h3 className='text-gray-700 mb-3'>{item.role}</h3>
                </div>
              </div>
            </div>
          ))}
        </OwlCarousel>
      </div>
      <button onClick={handleNext}>next</button>
    </div>
  );
};

I tried to using useRef but give me an error
“TypeError: carouselRef.current.prev is not a function”
enter image description here

I want to fix the button, like is there a way to link it with navtext or is there some other way? please help