Tengo un componente donde puedo seleccionar varias casillas de verificación. Para cada casilla de verificación seleccionada, se genera un chip que ilustra las casillas de verificación seleccionadas. Estos chips tienen un controlador de eliminación que puede eliminar las selecciones (como la propia casilla de verificación9). Esto funciona hasta ahora, pero si uso los chips para eliminar la selección, el estado de la casilla de verificación correspondiente no se ajusta.

¿Qué estoy haciendo mal?

Aquí está la representación de mis casillas de verificación (simplificado):

 {filteredData(data)?.map((data, index) => ( <CheckBox // some other props selected={selected.includes(data.id)} onChange={() => handleState(data.id)} /> ))}

Aquí está la representación de mis fichas:

 {selected.map((checkbox) => ( <Chip onDelete={() => handleState(checkbox.id, true)} /> ))}

Aquí está el método del controlador:

 const [selected, setSelected] = useState([]); const handleState = (id: string, withC?: boolean): void => { const selectedCB = [...selected]; const index = selectedCB.findIndex((item) => item.id === id); if (index > -1 || withC) { selectedCB.splice(index, 1); } else { selectedCB.push(data.find((item) => item.id === id)); } setSelected(selectedCB); };