Copying the graph data to itself results in orphan nodes

[Harry-OBrien]

Describe the bug When updating graph data, if we copy the links and only update the nodes, the links no longer connect to the node. The image below changes the node with title 'targeteee' to 'target'.

To Reproduce

const [graphData, setGraphData] = useState({ nodes: [{id:0, title:'a'}, {id:1, title:'b'}], links: [{source: 0, target:1}]});
setGraphData({
  ...graphData,
  nodes: [{id:0, title:'c'}, {id:1, title:'b'}]
});

Expected behavior A clear and concise description of what you expected to happen.

Node changes, still connected.

If I 'clean' the links first, it works fine:

const updatedNodes = graphData.nodes.map(node =>
  node.id === selectedNode.id ? selectedNode : node
);

const cleanedLinks = graphData.links.map(link => {
    return { source: link.source.id, target: link.target.id };
});

setGraphData({
  links: cleanedLinks,
  nodes: updatedNodes,
});

I suspect it has to do with all of the other information that gets added to the links such as x, y, vx, vy, and information about the source and target nodes.

Screenshots If applicable, add screenshots to help explain your problem.

See above

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOs
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22]

Smartphone (please complete the following information): N/A

Additional context Add any other context about the problem here. Related - not the same problem, but a similar solution.

[anyuruf]

Not sure but think D3 kinda works like that. For every cycle you provide information. I stand to be corrected!