Carousel not working even though Javascript is Correct:

                  <div className='w-full h-auto flex gap-72 justify-center'>
                        <button onClick={handlePrev} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-left'><FontAwesomeIcon icon={faChevronLeft} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                        <button onClick={handleForward} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-right'><FontAwesomeIcon icon={faChevronRight} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                  </div>

const [currentIndex, setCurrentIndex] = useState(0);

  const sounds = [
    "https://embed.music.apple.com/us/album/in-between-and-overseas/1607100188?i=1607101242",
    "https://embed.music.apple.com/us/album/orange-village/1677236538?i=1677236904",
    "https://embed.music.apple.com/us/album/dreams-money-can-buy/1475177816?i=1475177817",
    "https://embed.music.apple.com/us/album/goyard-umbrella/1677198478?i=1677198491",
    "https://embed.music.apple.com/us/album/louis-baggage-feat-babyface-ray/1609125563?i=1609126175",
    "https://embed.music.apple.com/us/album/east-liberty/1662164512?i=1662164513",
    "https://embed.music.apple.com/us/album/ive-been-daydreaming-my-entire-life/1243853548?i=1243853559",
  ];

  // Defining Back and Forth Functions

  const handlePrev = () => {
    setCurrentIndex((currentIndex - 1 + sounds.length) % sounds.length);
  }

  

  
  const handleForward = () => {
    setCurrentIndex((currentIndex + 1) % sounds.length);
  }