ReactJs adding 'active' class to a button in a list of buttons

I have a list of buttons created dynamically with the .map function. I am trying to add an "active" class to the button onClick and get rid of the "active" class of the other buttons.

This is what I have so far. The issue is that it's adding the class but not getting rid of the class on the other buttons. Any help is appreciated! Thank you :)

const Buttons = (props) => {
  const [active, setActive] = useState(false);
  const handleClick = (event) => {
    event.preventDefault();
    setActive(true)
  }
    const buttons = props.buttons.map((btn,index) => {
        return(
        
      <button className={active === true ? 'active' : ''} id={btn.id} onClick={handleClick}>{btn.name}</button>
        )
    })
    return (
        <div>
         {buttons}
        </div>
    )
}
export default Buttons;

from Recent Questions - Stack Overflow https://ift.tt/3aRNVrX
https://ift.tt/eA8V8J