Tengo:

 <blink> const [thisButtomSelected, setThisButtomSelected] = useState(false); var thisButton = []; const onAttributeClick = (e) => { thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e.currentTarget.name } setThisButtomSelected(thisButton[e.currentTarget.value]); } return( <div> {data.item.attributes.map((attribute, index) => ( <div key={index} > <p id={attribute.id}>{attribute.name}:</p> <ul className="choose-attribute-container-ul"> {attribute.items.map((item) => ( <li key={item.id}> <button value={item.value} id={item.id} name={attribute.name} className={_.isEqual(thisButtomSelected, { thisID: item.id, thisName: attribute.name }) ? 'attribute-button-selected' : 'attribute-button'} onClick={onAttributeClick} > {item.displayValue} </button> </li> ))} </ul> </div> ))} </div> ) </blink>

Este patrón funciona bien, pero cada vez que en la página hay más de 1 atributo y el usuario selecciona más de uno, el botón previamente seleccionado no se hace clic.
Mi pregunta es: ¿Cómo puedo guardar el estado del primer botón seleccionado después de hacer clic en el segundo?

1. para cada atributo solo un botón puede estar activo
2. se debe usar el nombre de los botones