Soy un desarrollador Junior, esta es mi primera pregunta aquí

Estoy usando un acordeón controlado porque necesito que el ícono cambie dinámicamente, pero quiero que permanezca abierto cuando expando un panel, incluso si expandí otro panel como lo hace el básico.

Entiendo que tiene que ver con la función handleChange pero su lógica me supera por ahora

Estoy trabajando con React

Algunas ideas ?

 const [expanded, setExpanded] = React.useState(false); const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); }; {grant?.generalRequirementsDetails.length ? ( <div className="grant-info-items"> <MuiAccordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} > <AccordionSummary expandIcon={ expanded ? ( <img src={lessSVG} alt="less" /> ) : ( <img src={moreSVG} alt="more" /> ) } aria-controls="panel1bh-content" id="panel1bh-header" > <h3 sx={{ width: '33%', flexShrink: 0 }}> Requisitos generales </h3> </AccordionSummary> <AccordionDetails> {grant?.generalRequirementsDetails.map( (item, idx) => ( <div key={idx} className="grant-item"> <img src={tickSVG} /> <p>{item}</p> </div> ), )} </AccordionDetails> </MuiAccordion> </div> ) : null}

Tengo otro par de paneles similares a este, así que cuando hago clic en uno y luego en otro, quiero que ambos estén abiertos a menos que vuelva a hacer clic en uno de ellos y ese panel se colapse como en el acordeón básico.

aquí está el enlace del componente MUI del que estoy hablando: https://mui.com/components/accordion/

Gracias por tu ayuda !