如何在拖动react后显示下一张幻灯片？

import React, { useState } from 'react';

const SlideShow = ({ slides }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [startX, setStartX] = useState(0);

  const handleMouseDown = (e) => {
    setStartX(e.clientX);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    const distance = e.clientX - startX;
    if (distance > 100) {
      // 向右拖动，显示下一张幻灯片
      setCurrentIndex((prevIndex) => (prevIndex === slides.length - 1 ? 0 : prevIndex + 1));
    } else if (distance < -100) {
      // 向左拖动，显示上一张幻灯片
      setCurrentIndex((prevIndex) => (prevIndex === 0 ? slides.length - 1 : prevIndex - 1));
    }
  };

  const handleMouseUp = () => {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return (
    <div className="slideshow" onMouseDown={handleMouseDown}>
      <div className="slide">{slides[currentIndex]}</div>
    </div>
  );
};

export default SlideShow;