mui 控制的手风琴图标在点击一个特定的手风琴时发生变化

Question

正如标题所说，我正在对一组数据进行映射，渲染多个受控的手风琴。
当我点击其中一个而不是图标时，每个手风琴都会单独打开/关闭。
当我点击一个手风琴时，它的图标会正确改变，但其他手风琴上的图标也不应该改变。
我知道这是因为我正在映射，但我不知道如何为每个 accordionSummary 的图标添加一个 id。
这是我的代码：

import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ControlPointIcon from '@mui/icons-material/ControlPoint';
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';



const data = [{left: "general settings", right:"this is an accoridon", text :"blabla", id:"pannel-1"}, {left:"users", "right": "you'r not an user", text:"allela eegf aa ", id:"pannel-2"}]


export default function ControlledAccordions() {
  const [expanded, setExpanded] = React.useState<string | false>(false);
  const expandicon = expanded ? <RemoveCircleOutlineIcon /> : <ControlPointIcon />

  const handleChange =
    (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
      setExpanded(isExpanded ? panel : false);
    };

  return (
    <div>
     {data.map((item) => 
      <Accordion expanded={expanded === item?.id} onChange={handleChange(item.id)}>
      <AccordionSummary
        expandIcon={expandicon}
        id={item.id}
      >
        <Typography sx={{ width: '33%', flexShrink: 0 }}>
         {item.left}
        </Typography>
        <Typography sx={{ color: 'text.secondary' }}>{item.right}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
         {item.text}
        </Typography>
      </AccordionDetails>
    </Accordion>)}
     
   
    </div>
  );
}

如何个性化每个图标？