aquí está mi caso, estoy cargando un archivo SVG y mostrándolo en la pantalla. me gustaría cambiar los colores del archivo svg. (el archivo svg contiene 500 objetos)

todo funciona bien, y parece que el estado ha cambiado pero el componente no se ha renderizado. Creo que esto se debe a que estoy usando el mapa para generar los elementos. Aquí está mi código:

 const Sim = () => { const [elements, setElements] = useState([]); const loadSVG = (e) => { ... ... newElements = newElements.map(x=> ({ data: x, color: '#0a22a0' })) setElements(newElements) }; } const rndColors = () => { elements.forEach(x=> { x.color = "#" + Math.floor(Math.random()*16777215).toString(16); }) setElements(elements) console.log(elements) } return ( <div> <Button style={{marginBottom: 10, maxHeight: 20}} size="small" variant="outlined" onClick={rndColors}>RND Colors</Button> <svg viewBox="0 0 2000 2000" version="1.1" x="0px" y="0px" style={{maxHeight:700}} > {elements.map((x,i) => <SVGElement data={x.data} index={i} color={x.color} />) } </svg> </div> ) }

pude ver claramente en los registros que los colores cambiaron, pero el color real de svg no cambió (solo después de cambiar algo en el código, la página se actualizó, puedo ver los nuevos colores)

¿Cómo puedo asegurarme de que una vez que haga clic en el botón, se cambiarán todos los colores del svg? algo no está desencadenando aquí el ciclo de renderizado de los elementos... ¿qué me estoy perdiendo aquí?