Material Ui Accordion closes automatically

Question

             <Accordion>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
              >
                <h6 className="title">Categories</h6>
              </AccordionSummary>
              <AccordionDetails>
                <input onChange={handleCheck} type="checkbox" value="1" />
                <input onChange={handleCheck} type="checkbox" value="1" />
              </AccordionDetails>
            </Accordion>

I have placed input type checkbox inside material ui accordian details panels and whenever i click checkbox the accordion collapses automatically.

handleCheck function:

const handleCheck = (event) => {
      event.stopPropagation();
      const { id, checked } = event.target;

      setSelectedCategories([...selectedCategories, id]);
      if (!checked) {
        setSelectedCategories(selectedCategories.filter((item) => item !== id));
      }
    };

handleChange fnuction:

    const handleChange = (panel) => (event, isExpanded) => {
      setExpanded(isExpanded ? panel : false);
    };

Answer 1

I just followed this link and referred to the answer made by evan_schmevan.

In mine, I used the code below and added it as an onClick function to all my input fields as well as in the AccordionDetail tag so as not to close the accordion when clicking anywhere inside it. Hope this helps!

function onEditClick(e) {
  e.stopPropagation();
}