Tengo un problema para establecer cajas indeterminadas. Estoy trabajando en VSCode y esos cuadros se importaron de MUI.

Cuando hago clic en el 'padre', solo se marcan child1 y child3, excepto child2. (Agregué child3).

Aquí está mi código. Creo que es necesario modificar el código.

 import * as React from 'react'; import Box from '@mui/material/Box'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; export default function IndeterminateCheckbox() { const [checked, setChecked] = React.useState([true, false]); const handleChange1 = (event) => { setChecked([event.target.checked, event.target.checked]); }; const handleChange2 = (event) => { setChecked([event.target.checked, checked[1]]); }; const handleChange3 = (event) => { setChecked([event.target.checked, checked[2]]); }; const handleChange4 = (event) => { setChecked([checked[0], event.target.checked]); }; const children = ( <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}> <FormControlLabel label="Child 1" control={<Checkbox checked={checked[1]} onChange={handleChange2} />} /> <FormControlLabel label="Child 2" control={<Checkbox checked={checked[2]} onChange={handleChange3} />} /> <FormControlLabel label="Child 3" control={<Checkbox checked={checked[0]} onChange={handleChange4} />} /> </Box> ); return ( <div> <FormControlLabel label="Parent" control={ <Checkbox checked={checked[0] && checked[1] && checked[2]} indeterminate={checked[0] !== checked[1] && checked[2] | checked[1] !== checked[0] && checked[2] | checked[2] !== checked[0] && checked[1]} onChange={handleChange1} /> } /> {children} </div> ); }