I am using accordion material-mui. at first all of accordions are opened. when I scroll the page and I reach to the second accordion, I want to close the first accordion and when I reach to the third accordion , I want to close the previous ones and so on.How can I do that?
my simple code is in the below link.

https://stackblitz.com/edit/vitejs-vite-nzp98t?file=src%2FApp.tsx,src%2FApp.css&terminal=dev

import { Accordion as MuiAccordion } from '@mui/material'
export const Accordion = ({ accordions }: AccordionProps) => {
  const [expandedIds, setExpandedIds] = useState<string[]>(
    accordions.map(({ id }) => id)
  );
  return (
    <div className="accordion">
      {accordions.map(({ id, title, content, disabled }) => (
        <MuiAccordion
          key={id}
          disabled={disabled}
          defaultExpanded={expandedIds.includes(id)}
        >
          <AccordionSummary expandIcon={<ExpandMoreIcon />} id={id}>
            {title}
          </AccordionSummary>
          <AccordionDetails>{content}</AccordionDetails>
        </MuiAccordion>
      ))}
    </div>
  );
};