I’m working on a project, I have requirement to show accordion which should only expand one at a time.
Even my code is same as Material-ui offical website code it was still not working.

My data structure:

const investmentScreenData: [
  {
    id: 0,
    title: "....",
    icon: "....",
    points: [
      '...',
      '...',
      '...',
    ]
  },
{...},
{...}
]

Investment.jsx (Parent component):

{investMentScreenData.map((item, index) => {
 return <InfoAccordion key={index} item={item} />;
})}

InfoAccordion.jsx:

  const [expanded, setExpanded] = useState(0);

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


return (
   <StyledAccordion
       expanded={expanded === item.id}
       onChange={handleChange(item.id)}
    >
    <StyledAccordionSummery
            aria-controls='panel1d-content'
            id='panel1d-header'
          >
     <Typography
                component='p'
                variant='p'
                fontSize={{ xs: '19px', sm: '24px', md: '19px', lg: '24px' }}
                fontWeight={500}
                fontFamily={'inter'}
                color={'text.darkGreen'}
              >
                {item.title}
              </Typography>
</StyledAccordionSummery>

<StyledAccordionDetails>
 {item.points.map((point, index) => {
                  return (
                    <StyledListitem key={index} disableGutters disablePadding>
                       ...
                    </StyledListitem>
        )
  </StyledAccordionDetails>
        </StyledAccordion>

When user click on a accordion previous opened accordion should close and open current clicked accordion.