React Swiper.js正在删除从数组呈现的索引处的幻灯片

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'react-swiper';

const Slider = () => {
  const [slides, setSlides] = useState([
    'Slide 1',
    'Slide 2',
    'Slide 3',
    'Slide 4',
  ]);
  const [currentIndex, setCurrentIndex] = useState(0);

  const deleteSlide = (index) => {
    const newSlides = [...slides];
    newSlides.splice(index, 1);
    setSlides(newSlides);

    // 更新当前幻灯片索引
    if (currentIndex >= newSlides.length) {
      setCurrentIndex(newSlides.length - 1);
    }
  };

  return (
    <Swiper>
      {slides.map((slide, index) => (
        <SwiperSlide key={index}>
          {slide}
          <button onClick={() => deleteSlide(index)}>删除</button>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default Slider;