PD: soy nuevo en D3.js y force-graphs, así que por favor, no me cuentes.

Me gustaría agregar nodos dinámicamente al gráfico. Estoy teniendo dificultades para entender cómo hacer esto. Por favor, encuentre mi código a continuación:

/src/index.js

 import React, { useRef, useEffect } from "react"; import ReactDOM from "react-dom"; import ForceGraph2D from "react-force-graph-2d"; import "./styles.css"; var data = { nodes: [], links: [] }; function App() { const forceRef = useRef(null); useEffect(() => { for (let i = 0; i < 5; i++) { data.nodes.push({ id: i.toString()}); } console.log(data); forceRef.current.d3Force("charge").strength(-400); }); return ( <ForceGraph2D graphData={data} nodeLabel="id" linkCurvature="curvature" enablePointerInteraction={true} linkDirectionalParticleWidth={1} ref={forceRef} /> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

Si desea jugar con el código, utilice este enlace para la zona de pruebas. Los nodos del gráfico ni siquiera son visibles en la pantalla. ¿Hay algo que me estoy perdiendo? Sería genial si alguien puede actualizar el código para una mejor comprensión.