Puede agregar onClick a la input y actualizar sus datos de estado en función del elemento seleccionado.

 const handleChange = (id) => { const clonedData = [...state]; setState( clonedData.map((d) => (d.id === id ? { ...d, checked: !d.checked } : d)) ); }; //// Your remaining code <input checked={item.checked} type="checkbox" onClick={() => handleChange(item.id)} />;

Se adjunta una caja de arena para referencia.

Dados los data que nos proporcionó como el state , puede crear una copia del estado y alternar el que ha activado para verificar.

 const [state, setState] = useState(data) const handleChange = (id) = { const newState = state.map(item => item.id === id? {...item, state: !item.checked} : item) setState(newState) } {state.map((item, index) => ( <div key={index}> <input checked={item.checked} type="checkbox" onChange={(e) => handleChange(item.id)}/> <span>{item}</span> </div> ))}

Puede crear una nueva función y, al cambiar, actualizar el estado anterior

 export default function App() { const data = [ { id: '1', checked: false, }, { id: '2', checked: false, }, { id: '3', checked: false, }, { id: '4', checked: false, }, ]; const [state, setState] = React.useState(data); function updateState(id) { const newVal = state.map((item) => { if (item.id === id) { return { ...item, checked: !item.checked, }; } else { return { ...item, }; } }); setState(newVal); } return ( <div> {state.map((item, index) => ( <div key={index}> <input checked={item.checked} type="checkbox" onChange={() => updateState(item.id)} /> <span>{item.id}</span> </div> ))} </div> ); }