React:如何切换按钮组中的活动类？

import React, { useState } from 'react';

const ButtonGroup = () => {
  const [activeButton, setActiveButton] = useState(0);

  const handleButtonClick = (index) => {
    setActiveButton(index);
  };

  return (
    <div>
      <button
        className={activeButton === 0 ? 'active' : ''}
        onClick={() => handleButtonClick(0)}
      >
        Button 1
      </button>
      <button
        className={activeButton === 1 ? 'active' : ''}
        onClick={() => handleButtonClick(1)}
      >
        Button 2
      </button>
      <button
        className={activeButton === 2 ? 'active' : ''}
        onClick={() => handleButtonClick(2)}
      >
        Button 3
      </button>
    </div>
  );
};

export default ButtonGroup;