When I click on the checkbox, an accordion opens. How do I stop this action?

Question

enter image description here

When I click on the checkbox, an accordion opens. How to stop this action?

I wanted to add e.stopPropogation() inside the handleChangeChecked function but it doesn't work.

Please let me know if anyone has this problem and how to solve it

const [expanded, setExpanded] = useState(0);
  

const handleChangeChecked = useCallback(
    (id) => (e) => {
      const { checked } = e.target;
      setCheckboxes((prevValue) => ({ ...prevValue, [id]: checked }));
    },
    [checkboxes],
  );
  const handleChangeExpanded = useCallback(
    (panel: string) => async (event, newExpanded) => {
      setExpanded(newExpanded ? panel : false);
    },
    [expanded, setOperationData],
  );
  const renderIncluded = useMemo(
    () =>
      columnType === 'PLAN' && (
        <Grid item xs={isEmployee ? 0.6 : 0.3}>
          <FormControlLabel
            checked={checkboxes[operation.expenseId] || ''}
            onChange={handleChangeChecked(operation.expenseId)}
            css={labelTextCSS}
            control={<Checkbox />}
            label=""
          />
        </Grid>
      ),
    [checkboxes, columnType, handleChangeChecked, isEmployee, operation.expenseId],
  );

  return (
    <Accordion key={operation.operationId} onChange={handleChangeExpanded(`${operation.operationId}`)}>
    //////
    </Accordion>
  );