React Swiper With custom nav

import { car } from "../assets/images/imageIndex";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, A11y, Parallax, Scrollbar } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { motion } from "framer-motion";
import { div } from "framer-motion/client";
import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from 'lucide-react';


function FeaturedVehicle({ ref }) {
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  const [swiperInstance, setSwiperInstance] = useState(null);
  const [isBeginning, setIsBeginning] = useState(true);
  const [isEnd, setIsEnd] = useState(false);

  useEffect(() => {
    // check if swiperInstance, navigation, prevref and nextref current is not null
    if(swiperInstance && swiperInstance.params.navigation && prevRef.current && nextRef.current) {
        swiperInstance.params.navigation.prevEl = prevRef.current;
        swiperInstance.params.navigation.nextEl = nextRef.current;

        // refresh the navigation system
        swiperInstance.navigation.destroy(); // destroy existing nav
        swiperInstance.navigation.init();    // reinit
        swiperInstance.navigation.update();  // update with new refs

        if (swiperInstance) {
          // update swiper begining and end
          const updateEdgeStates = () => {
              setIsBeginning(swiperInstance.isBeginning);
              setIsEnd(swiperInstance.isEnd);
          }
          updateEdgeStates();

          swiperInstance.on("slideChange", updateEdgeStates);

          cleanup = () => {
            swiperInstance.off("slideChange", updateEdgeStates);
          }
        }
    }

    // when components unmounts run cleanup
    return cleanup;
  }, [swiperInstance])

  return (
    <section
      className="py-10 md:py-20 px-2 sm:px-4 md:px-12 lg:px-20 bg-gradient-to-r from-yellow-400 to-yellow-500 w-full"
      ref={ref}
    >
      <h2 className="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-3 md:mb-4 text-gray-900 font-open-sans">
        Featured Vehicles
      </h2>
      <p className="text-center text-gray-700 mb-6 md:mb-12 max-w-2xl mx-auto text-base sm:text-lg">
        Explore our range of vehicles carefully curated for performance, style, and reliability.
      </p>

      {/* <div className="flex justify-between mt-4">
        <button ref={prevRef} className="text-white bg-gray-800 px-4 py-2 rounded">
          Prev
        </button>
        <button ref={nextRef} className="text-white bg-gray-800 px-4 py-2 rounded">
          Next
        </button>
      </div> */}

      <div className="relative">
        {(isBeginning) ? "true" : "false"}
        <button ref={prevRef} disabled={isBeginning} className={`absolute left-2 ${(isBeginning ) ? "bg-gray-300/20":"bg-gray-300"}  top-1/2 z-10 cursor-pointer  p-2 rounded-full`}>
          <ChevronLeft />
        </button>
        <button ref={nextRef} disabled={isEnd}  className={`absolute right-2 ${(isEnd ) ? "bg-gray-300/20":"bg-gray-300"} top-1/2 z-10 cursor-pointer bg-gray-300 p-2 rounded-full`}>
          <ChevronRight />
        </button>

        <Swiper
            className="max-w-7xl mx-auto w-full"
            spaceBetween={10}
            modules={[Navigation, A11y]}
            onSwiper={setSwiperInstance}
            observer={true}
            observeParents={true}
            breakpoints={{
              640: {
                slidesPerView: 1
              },
              768: {
                slidesPerView: 2,
              },
              1024: {
                slidesPerView: 3,
              },
            }}
      >
        {vehicles.map((vehicle, idx) => (
          <SwiperSlide key={idx}>
            <div className=" shadow-2xl bg-gray-900 mx-auto  ">
              <img src={vehicle.image} alt={vehicle.name} />
              <div className="flex flex-col p-10">
                  {
                    vehicle.features.map((feature, idx) => {
                    return (
                        <span className="text-white"> {feature }</span>
                      )
                    })
                  }
              </div>
              {}
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
      </div>


    </section>
  );
}

export default FeaturedVehicle;