react-graph-vis и перехватчики реакции. График не обновляется

Question

const options = {
  autoResize:true,
  height:'500px',
  width:'500px',
};
const g1  = {
  nodes: [
    { id: 1, label: "Node 1", title: "node 1 tootip text" },
  ],
  edges: [
  ]
};

const g2 = {
  nodes:[
    { id: 5, label: "Node 2", title: "node 2 tootip text" }
  ],
  edges:[]
}

function App() {

  const [graphData, setGraphData] = useState(g1)

  const addNode = (e) => {
    e.preventDefault()
    console.log('addNode clicked!')
    setGraphData(g2)    
  }

  return (
    <div className='appContainer'>
      <div className='titleContainer'>
        <h1 className='title'>SettleIt.</h1>
      </div>
      <div className='mainContainer'>
        <div className='graphContainer'>
          <Graph
                graph={graphData}
                options={options}
            />
        </div>
        <div className='controlContainer'>
          <ControlBox addNode={addNode}/>
        </div>
      </div>
    </div>

  );
}

export default App;

graphData обновляется, но граф с новыми узлами не отображает вместо этого ошибку, которая не может добавить элемент с существующим идентификатором. Есть ли другой способ обновить узлы и ребра графа? Или я что-то делаю не так с методами жизненного цикла реакции, что его обновление дважды?