I have a problem for setting indeterminate boxes. I'm working on VSCode, and those boxes were imported from MUI.

When I click the 'parent', only child1 and child3 are checked except child2.(I added child3.)

Here is my code. I think the code is needed to be modified.

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>
  );
}