MUI Component : CheckBox Group

MUICheckboxGroup.tsx

import * as React from 'react';
import Box from '@mui/material/Box';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormHelperText from '@mui/material/FormHelperText';
import Checkbox from '@mui/material/Checkbox';

export default function MUICheckGroup() {
  const [cat, setCategory] = React.useState([ "A" ,  "B","D"]);
  const [selectedCat, setSelectedCat] = React.useState([]);
 

  const handleChange = (event: { target: { checked: any; name: any; }; }) => {
    let updatedList = [...selectedCat]
    if (event.target.checked) {
      updatedList = [...selectedCat, event.target.name];
    }
    else {
      updatedList.splice(selectedCat.indexOf(event.target.name))
    }
    setSelectedCat(updatedList);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
        <FormLabel component="legend">Assign responsibility</FormLabel>
        <FormGroup>
          {cat.map((c, i) =>
            <FormControlLabel key={i}
              control={
                <Checkbox size="small"   onChange={handleChange} name={c} />
              }
              label={c}
            />
          )}
        </FormGroup>
        <FormHelperText>Be careful</FormHelperText>
      </FormControl>
      {JSON.stringify(selectedCat)}

    </Box>
  );
}