import : 
import Accordion from '@mui/material/Accordion'; 
import AccordionDetails from '@mui/material/AccordionDetails'; 
import AccordionSummary from '@mui/material/AccordionSummary'; 
import AccordionActions from '@mui/material/AccordionActions'; 
import ExpandMoreIcon from '@mui/material/ExpandMore'; 
import Button from '@mui/material/Button'; 
import : scss
import "@/assets/scss/components/accordion.scss";
component :  https://mui.com/material-ui/react-accordion/

component : default
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Accordion 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Accordion Actions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
CancelAgree

<Accordion>
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1-content"
            id="panel1-header"
      >
            Accordion 1
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>
<Accordion>
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel2-content"
            id="panel2-header"
      >
            Accordion 2
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>
<Accordion defaultExpanded>
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel3-content"
            id="panel3-header"
      >
            Accordion Actions
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
     <AccordionActions>
            <Button size="small" variant="outlined">Cancel</Button>
            <Button size="small" variant="contained">Agree</Button>
     </AccordionActions>
</Accordion>

component : Only one
Collapsible Group Item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Collapsible Group Item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
Collapsible Group Item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

const [expanded, setExpanded] = React.useState<string | false>('panel1');
const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
      setExpanded(newExpanded ? panel : false);
};
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} >
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1-content"
            id="panel1-header"
      >
            Collapsible Group Item #1
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')} >
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel2-content"
            id="panel2-header"
      >
            Collapsible Group Item #2
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')} >
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel3-content"
            id="panel3-header"
      >
            Collapsible Group Item #3
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>

component : Changing heading
Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

<Accordion slotProps={{ heading: { component: 'h4' } }} >
     <AccordionSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1-content"
            id="panel1-header"
      >
            Accordion
     </AccordionSummary>
     <AccordionDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
     </AccordionDetails>
</Accordion>

dom : Anatomy default
<div class="MuiAccordion-root">
      <h3 class="MuiAccordion-heading">
            <button class="MuiButtonBase-root MuiAccordionSummary-root" aria-expanded="">
                 <!-- Accordion summary goes here -->
            </button>
      </h3>
      <div class="MuiAccordion-region" role="region">
            <div class="MuiAccordionDetails-root">
                 <!-- Accordion content goes here -->
            </div>
      </div>
</div>