tengo la siguiente situacion. Estoy mapeando un lista de nombres, y cada nombre esta en un div. Quiero que al hacer click en algun div, este cambie de color como "seleccionado" pero si hago click en otro div, este vuelva a su color original y se cambie el color del nuevo seleccionado.
He probado usando useState, pero solo he logrado que se marquen todos del mismo color seleccionado.
let arreglo =["Alex","Victor","Juan","Pablo","Fernando","Esteban"]
const seleccionado = (e) =>{
e.target.className ="h-32 w-32 border-4 bg-red-700 "
}
{arreglo.map((nombres, index) => (
<div
key={index}
onClick={(e) => {
seleccionado(e)}}
className={"h-32 w-32 border-4 bg-blue-300"}
>
{nombres}
</div>
))}
Al marcar uno cambia a color rojo, pero si marco otro, también se pone rojo. He intentado varias cosas pero no logro "desactivar" el color al original.