如何在NextJS中创建旋转木马？

import React, { useRef, useEffect } from 'react';
import styles from './Carousel.module.css';

const Carousel = () => {
  const carouselRef = useRef(null);

  useEffect(() => {
    const carousel = carouselRef.current;
    const items = carousel.querySelectorAll('.item');
    const itemCount = items.length;
    let currentIndex = 0;

    const rotateCarousel = () => {
      const angle = (360 / itemCount) * currentIndex;
      carousel.style.transform = `rotateY(${angle}deg)`;
    };

    const nextItem = () => {
      currentIndex = (currentIndex + 1) % itemCount;
      rotateCarousel();
    };

    const prevItem = () => {
      currentIndex = (currentIndex - 1 + itemCount) % itemCount;
      rotateCarousel();
    };

    // 添加事件监听器
    const nextButton = carousel.querySelector('.next-button');
    const prevButton = carousel.querySelector('.prev-button');
    nextButton.addEventListener('click', nextItem);
    prevButton.addEventListener('click', prevItem);

    // 初始化旋转木马
    rotateCarousel();

    return () => {
      // 移除事件监听器
      nextButton.removeEventListener('click', nextItem);
      prevButton.removeEventListener('click', prevItem);
    };
  }, []);

  return (
    <div className={styles.carousel} ref={carouselRef}>
      <div className={styles.item}>Item 1</div>
      <div className={styles.item}>Item 2</div>
      <div className={styles.item}>Item 3</div>
      <button className={styles.nextButton}>Next</button>
      <button className={styles.prevButton}>Prev</button>
    </div>
  );
};

export default Carousel;