How can I manually set accordion close on button - reactjs

Question

I am completely new to React. Here is the code I currently have. I removed some unnecessary parts to keep it clean.
<AccordionSummary
expandIcon={}
aria-controls="panel1a-content"
>This is Accordian
<AccordionSummary/>
<AccordionDetails>
<Grid container spacing={4} mb={5}>
<Grid item xs={12} md={6}>
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={value}
onChange={handleChange}
>
<FormControlLabel
value="yes"
name="Yes"
control={<Radio onChange={handleChange} />}
label="Yes"
/>
<FormControlLabel
value="no"
name="No"
control={<Radio onChange={handleChange} />}
label="No"
/>
</RadioGroup>
</FormControl>
</Grid>
</Grid>
<Grid>
<Button className={classes.button_dark} variant="contained">
Submit
</Button>
<Button className={classes.button_light}>Cancel</Button>
</Grid>
</AccordionDetails>
I was using controlled accordion where I want a change, but I tried various combinations referring MUI docx, but I'm not getting any soln. This is the states I have used, but this one is for a radio button.
const [value, setValue] = React.useState("");
const handleChange = (e) => {
const {value} = e.target;
setValue(value);
};
What I want is that whenever I click the cancel button, the accordion should hide. The expand icon is working, but here I want to hide the accordion whenever I press the cancel button.

Answer 1

In MUI Accordion there's a property called expanded which accepts a boolean value and using that you can manually control the expansion and hide the according. You need to maintain a state to do that. Here's a basic example.
const [expanded, setExpanded] = React.useState();
<Accordion expanded={expanded === 'panel1'} onChange={() => setExpanded('panel1')}>
// items inside the accordion
<Button className={classes.button_light} onClick={() => setExpanded(undefined)}>Cancel</Button>
</Accordion>
This is just a simple solution to your problem.
refer to this for more details
Update
Here's a working example