如何在reactJS中管理多页签注销？

import React, { useState } from 'react';

const Tab = ({ title, content, onClose }) => {
  return (
    <div>
      <h2>{title}</h2>
      <button onClick={onClose}>关闭</button>
      <div>{content}</div>
    </div>
  );
};

const TabManager = () => {
  const [tabs, setTabs] = useState([
    { title: '页签1', content: '内容1' },
    { title: '页签2', content: '内容2' },
    { title: '页签3', content: '内容3' },
  ]);
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClose = (index) => {
    const newTabs = [...tabs];
    newTabs.splice(index, 1);
    setTabs(newTabs);

    if (index === activeTab) {
      setActiveTab(Math.max(0, index - 1));
    }
  };

  return (
    <div>
      {tabs.map((tab, index) => (
        <Tab
          key={index}
          title={tab.title}
          content={tab.content}
          onClose={() => handleTabClose(index)}
        />
      ))}
    </div>
  );
};

export default TabManager;