Mis ganchos de reacción alternan todos los elementos en lugar de solo el elemento único. Y, no sé por qué?

Comportamiento esperado = seleccione un botón, cambia el nombre de la clase, llama a la función, haga clic en el mismo botón, cambia el nombre de la clase y llama a la función.

En cambio, lo que sea que seleccione hace que se seleccionen todos los demás elementos. Y, si selecciono un botón diferente, elimina todo lo que estaba almacenado en el almacenamiento local.

El gancho

 const [color, setColor] = useState(false) function addOrRemove(e) { const elem = e.currentTarget; setColor(!color) if (color){ addValue(elem) } else { removeValue(elem) } } function addValue(e) { if (e.value !== "") { if (!favs.includes(e.value)) { favs.push(e.value); localStorage.setItem("name", JSON.stringify(favs)); console.log(favs); document.getElementById("favsarray").innerHTML = favs } } } function removeValue(e, value) { if (e.value !== "") { //delete from array favs.pop(e.value); console.log(favs); //change the div text document.getElementById("favsarray").innerHTML = favs; //get the values from localstorage- parse const stored = JSON.parse(localStorage.getItem("name")); //delete the value delete stored[(value, e.value)]; //store the new array as a string localStorage.setItem("name", JSON.stringify(favs)); console.log(stored); } }

llamando a esta función

 <button id="btn" onClick={addOrRemove} className={color? "red": "white"} value={"Name: " + d.name + " Description: " + d.description + " Stars: " + d.stargazers_count + " URL: " + d.html_url}