Add or remove css classes to pure bootstrap button on click in React functional component

Question

How to add or remove css classes from an element in react functional component?

setup:

export default function App() {
   const menuOptions = ["home", "blog", "feedback"];

   const [classes, setClasses] = useState("btn btn-secondary m-1");
   const [activeIndex, setActiveIndex] = useState(0);

generate menu buttons:

const renderMenu = menuOptions.map((menuItem, indx) => {
   return (
     <button
        key={indx}
        className={classes}
        onClick={(key) => handleClick(key)}
        >
           {menuItem}
        </button>
     );
  });

rendering:

  return (
     <div className="App">
        <h1>Add Remove CSS classes</h1>
        {renderMenu}
     </div>
     );
  }

I have just started learning React so I am struggling with adding/removing classes. sample code: https://codesandbox.io/s/tender-poincare-qw64m0?file=/src/App.js