React: Graph won't re-render when props change #1520

I am generating a graph based on props that are given. The initial load of the graph goes well. When the props change the graph won't update, but I have confirmed that the child component does receive the new props. Also on a new render the graph.clear() does fire off, removing the current graph.

This is how the component is setup:

const TreeGraphReact = ({ dependencies }): ReactElement => {
  const ref = React.useRef(null);

  useEffect(() => {
    let graph = null;
    graph = createGraph(ref, dependencies);
    return () => {
      graph.clear();
      console.log("SHOULD DRAW AGAIN")
      graph = createGraph(ref, dependencies)
    };
  }, [dependencies])

  return  <div ref={ref} />
};

the createGraph function looks like this

function createGraph(ref:React.MutableRefObject<any>, dependencies) {
  let graph = null;
  graph = new G6.Graph({
    container: ref.current,
    width: 700,
    height: 800,
    fitView: false,
    modes: {
      default: ["drag-canvas", "drag-node"],
    },
    layout: {
      type: "dagre",
      rankdir: "LR",
      align: "DL",
      nodesepFunc: (): number => 1,
      ranksepFunc: (): number => 1,
    },
    defaultNode: {
      size: [200, 200],
      type: "sql",
      labelCfg: {
        refY: 12,
        style: {
          fill: "#black",
          fontSize: 12,
          fontStyle: "bold",
        },
      },
    },
    defaultEdge: {
      type: "circle-running",
      style: {
        lineWidth: 1,
        stroke: "green",
      },
      labelCfg: {
        refY: 12,
        style: {
          fill: "#black",
          fontSize: 14,
          fontStyle: "bold",
        },
      },
    },
  });

  graph.data(dependencies);
  graph.render();

  return graph;
}