Estoy tratando de desarrollar un proyecto que use Cytoscape usando React Component. Traté de seguir la documentación de - https://github.com/plotly/react-cytoscapejs e intenté acceder al objeto cy para usar la API de Cytoscape. Este es el código que escribí,

 import CytoscapeComponent from "react-cytoscapejs"; function App() { const [elements, setElements] = useState([ { data: { id: "a" } }, { data: { id: "b" } }, { data: { id: "c" } }, { data: { id: "d" } }, { data: { id: "e" } }, { data: { id: "f" } }, // edges { data: { id: "ab", source: "a", target: "b", }, }, { data: { id: "cd", source: "c", target: "d", }, }, { data: { id: "ef", source: "e", target: "f", }, }, { data: { id: "ac", source: "a", target: "c", }, }, { data: { id: "be", source: "b", target: "e", }, }, ]); return ( <div className="App"> <button onClick={()=>setElements(...elements,[{ data: { id: "x" } },])}>Add</button> <CytoscapeComponent cy={(cy) => { cy.add(elements); console.log(cy); }} style={{ width: "100vw", height: "100vh" }} /> ; </div> ); } export default App;

Esto crea el gráfico, pero cuando hago clic en el botón Agregar, la pantalla se queda en blanco. Al inspeccionar la consola, obtengo cytoscape.cjs.js:831 Uncaught Error: Can not create second element with ID a