We are using destructuring and spreading operator to create new objects with the same properties as `fetchedNodes`, but with an additional `id` and `label` property in the `data` object.

This is because `cytoscape` requires the node objects to have an `id` property to identify them, and a `label` property to display as the node's label.

By creating new objects with the same properties as `fetchedNodes`, we avoid mutating the state and we add the required `id` and `label` properties to each node object. This ensures that the `cytoscape` component can properly display the graph.
We are using destructuring and spreading operator to create new objects with the same properties as `fetchedNodes`, but with an additional `id` and `label` property in the `data` object.

This is because `cytoscape` requires the node objects to have an `id` property to identify them, and a `label` property to display as the node's label.

By creating new objects with the same properties as `fetchedNodes`, we avoid mutating the state and we add the required `id` and `label` properties to each node object. This ensures that the `cytoscape` component can properly display the graph.

Here's an example of how we might use destructuring and spreading operator to achieve this:

```javascript
const newNodes = fetchedNodes.map(node => ({
  ...node,
  data: {
    ...node.data,
    id: node.id,
    label: node.label
  }
}));
```

In this example, we're using the `map` method to iterate over each node in `fetchedNodes`, and we're creating a new object for each node using the spread operator. The new object has the same properties as the original node, but we're also adding a `data` property to it.

Inside the `data` property, we're using the spread operator again to copy the existing `data` properties from the original node, and we're adding an `id` and `label` property to it.

By doing this, we're creating a new object with the same properties as the original node, but with an additional `id` and `label` property in the `data` object. This new object can then be used to update the state of the `cytoscape` component.
const newNodes = fetchedNodes.map((node) => {
  const { data } = node;
  const newNode = { ...node };
  newNode.id = node.id;
  newNode.label = data.label;
  return newNode;
});

// returns an array of new node objects with the required 'id' and 'label' properties

// using destructuring and spreading operator to create new objects with the same properties as fetchedNodes, but with an additional 'id' and 'label' property in the 'data' object.