'Open Accordion only on click of the accordion

enter image description here

when i click on the checkbox it opens the accordion. what can i do to prevent the accordion from opening when i click on the checkbox. is there any style for this? or what should i do to make it open

export const FinancialAccordions: React.FC<Props> = ({ control, operation, index }) => {
  const [expanded, setExpanded] = useState('panel_0');
  const handleChangeExpanded = useCallback(
    (panel: string) => (event, newExpanded) => {
      setExpanded(newExpanded ? panel : false);
    },
    [expanded],
  );
  return (
    <>
      <Accordion key={operation.expenseId} onChange={handleChangeExpanded(`panel_${operation.expenseId}`)}>
        <AccordionSummary expandIcon={<SvgArrowFinancial />}>
          <Grid css={pl(12)} container justifyContent="flex-start" alignItems="center">
            <Grid item xs={0.3}>
              <Controller
                control={control}
                name={`selections.${index}`}
                render={({ field: { value, onChange } }) => (
                  <FormControlLabel
                    value={value}
                    onChange={(e, checked) => onChange(checked)}
                    css={labelTextCSS}
                    control={<Checkbox />}
                    label=""
                  />
                )}
              />
            </Grid>
          </Grid>
        </AccordionSummary>
        <AccordionDetails>
          <Grid container justifyContent="space-between" flexDirection="column">
            <Grid item xs={11.35}>
              <Grid container justifyContent="center" alignItems="start">
                <Grid item xs={5.7}></Grid>
                <Grid item xs={3.8}>
                  <Typography css={operationsChildDataCSS}>На сумму {operation.money} в том числе НДС 18%</Typography>
                </Grid>
                <Grid item xs={2.14}>
                  <Typography css={[operationsChildDataCSS, textRightCSS]}>По счёту</Typography>
                </Grid>
              </Grid>
            </Grid>
            <Grid></Grid>
          </Grid>
        </AccordionDetails>
      </Accordion>
    </>
  );


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source