P.S: I'm new to D3.js and force-graphs so please bare with me.

I would like to add nodes dynamically to the graph. I'm having hard time understanding how to do this. Please find my code below:

/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);

If you would like to play around with code, please use this link for the sandbox. Graph nodes are not even visible on the screen. Is there something that I'm missing out on? It would be great if someone can update the code for better understanding.