Open Accordion only on click of the accordion - reactjs

Question

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