如何动态添加和删除一组togglebutton mui react js

npm install react
npm install @mui/material

yarn add react
yarn add @mui/material

import React, { useState } from 'react';
import { ToggleButton, ToggleButtonGroup } from '@mui/material';

const ToggleButtons = () => {
  const [selected, setSelected] = useState([]);

  const handleToggle = (value) => {
    const currentIndex = selected.indexOf(value);
    const newSelected = [...selected];

    if (currentIndex === -1) {
      newSelected.push(value);
    } else {
      newSelected.splice(currentIndex, 1);
    }

    setSelected(newSelected);
  };

  return (
    <ToggleButtonGroup value={selected} onChange={handleToggle}>
      {['Button 1', 'Button 2', 'Button 3'].map((button) => (
        <ToggleButton key={button} value={button}>
          {button}
        </ToggleButton>
      ))}
    </ToggleButtonGroup>
  );
};

export default ToggleButtons;

import React from 'react';
import ToggleButtons from './ToggleButtons';

const App = () => {
  return (
    <div>
      <h1>Toggle Buttons Example</h1>
      <ToggleButtons />
    </div>
  );
};

export default App;