Actualmente estoy tratando de almacenar los datos adjuntos a los botones en el sitio cuando un usuario hace clic en ellos. Estoy usando la función onClick para capturar los datos pasados desde el botón y estoy intentando establecerlo en el estado. El problema con el que me estoy encontrando; sin embargo, es que el valor del estado no se actualiza por algún motivo y sigue siendo una matriz vacía. Mi resultado deseado si el objeto existe en la matriz, actualícelo. Si no es así, agregue a la matriz. Cualquier orientación sobre por qué el estado no se actualiza correctamente sería muy apreciada. Mi código es el siguiente:

 import { useState } from "react"; export default function App() { const [formData, setFormData] = useState([]); const data = [ { name: "test1", id: 1, isActive: false }, { name: "test2", id: 2, isActive: false } ]; const handleClick = (item) => { setFormData( (formData) => formData.map((res) => res?.id === item.id ? { ...res, checked: !res.isActive } : { ...item, checked: !item.isActive } ) ); }; return ( <div className="App"> {data.map((item) => { return <button onClick={() => handleClick(item)}>{item.name}</button>; })} </div> ); }

se adjunta un entorno limitado de código para la depuración: https://codesandbox.io/s/peaceful-sun-20ec0?file=/src/App.js:0-681