Hola, tengo un problema con el componente de actualización, no funciona, en el registro de la consola muestra los datos correctamente. Quiero después de hacer clic en div para cambiar el elemento en el que se hizo clic en verdadero y agregar a este elemento el nombre de clase cambiado

a continuación es jsx

 {tabObjects.map((item) => ( <div key={item.key} id={item.key} className={item.isChecked ? checked : notChecked} onClick={() => selectItem(item.key)} > <i className={item.icon}></i> <p className="hide-sm">{item.pText}</p> </div> ))}

después de hacer clic en seleccionar elemento, quiero cambiar el nombre de la clase a marcado y el resto de ellos marcados como falsos, así que:

 const selectItem = (e) => { tabObjects.map((item) => { item.isChecked = false; if (e === item.key) { item.isChecked = true; } }); setTabObjects(tabObjects); };

y muestra datos json

 const [tabObjects, setTabObjects] = useState([ { key: "sample1", isChecked: true, icon: "sample1i", pText: "Test text", }, { key: "sample2", isChecked: false, icon: "sample2i", pText: "Test text", }, ]); let checked = "sampleClass checked"; let notChecked = "sampleClass";

¿Qué estoy haciendo mal? Al hacer clic en cualquier div con el registro de la consola funcionando bien