Product Carousel - Copy this React, Tailwind Component to your project

import { useState, useEffect, useCallback, useRef } from "react"; import { FiChevronLeft, FiChevronRight, FiPlay, FiPause } from "react-icons/fi"; import Slidercart from "../SliderITEm/Slidercart"; const SubProductCarousel = ({finalSub:products}) => { const [currentIndex, setCurrentIndex] = useState(0); const [isPlaying, setIsPlaying] = useState(true); const [isLoading, setIsLoading] = useState(true); const carouselRef = useRef(null); const itemsPerScreen = window.innerWidth >= 1024 ? 3 : window.innerWidth >= 768 ? 2 : 1; const totalSlides = Math.ceil(products?.length / itemsPerScreen); const nextSlide = useCallback(() => { setCurrentIndex((prevIndex) => prevIndex === totalSlides - 1 ? 0 : prevIndex + 1 ); }, [totalSlides]); const prevSlide = () => { setCurrentIndex((prevIndex) => prevIndex === 0 ? totalSlides - 1 : prevIndex - 1 ); }; const goToSlide = (index) => { setCurrentIndex(index); }; const togglePlayPause = () => { setIsPlaying(!isPlaying); }; useEffect(() => { let interval; if (isPlaying) { interval = setInterval(nextSlide, 3000); } return () => clearInterval(interval); }, [isPlaying, nextSlide]); const handleKeyDown = (e, index) => { if (e.key === "Enter" || e.key === " ") { goToSlide(index); } }; useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); }, 1500); return () => clearTimeout(timer); }, []); return ( <div className=" relative max-w-[80%] mx-auto px-4 py-8" role="region" aria-label="Product Carousel"> <div ref={carouselRef} className="overflow-hidden relative" aria-live="polite" > <div className="flex transition-transform duration-500 ease-in-out justify-center gap-5 " > {products?.map((product) => <Slidercart product={product} key={product._id}></Slidercart>)} </div> </div> <button onClick={prevSlide} className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white/80 p-2 rounded-full shadow-lg hover:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label="Previous slide" > <FiChevronLeft className="w-6 h-6" /> </button> <button onClick={nextSlide} className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white/80 p-2 rounded-full shadow-lg hover:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label="Next slide" > <FiChevronRight className="w-6 h-6" /> </button> <div className="flex justify-center items-center mt-4 gap-4"> <button onClick={togglePlayPause} className="p-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label={isPlaying ? "Pause autoplay" : "Play autoplay"} > {isPlaying ? <FiPause className="w-4 h-4" /> : <FiPlay className="w-4 h-4" />} </button> <div className="flex gap-2" role="tablist"> {[...Array(totalSlides)].map((_, index) => ( <button key={index} onClick={() => goToSlide(index)} onKeyDown={(e) => handleKeyDown(e, index)} className={`w-3 h-3 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 ${ currentIndex === index ? "bg-blue-500" : "bg-gray-300" }`} role="tab" aria-selected={currentIndex === index} aria-label={`Go to slide ${index + 1}`} /> ))} </div> </div> </div> ); }; export default SubProductCarousel; make the carousel properly its not working