react-graph-vis - Grapg is not re rendering even ofter state changes

Question

When I try to update the state on the hover event, the actual state value is getting changed but the graph is not re-rendering.

in the console, I am able to see the node label is changed to sample. but the graph is not rerendering.

Here is my react function based component.

import React, { useEffect, useState } from 'react';
import Graph from 'react-graph-vis';

import './vis-network.css';

function RelationGraph1() {
  const [graph, setGraph] = useState({
    nodes: [
      {
        id: 1,
        label: 'Node 1',
        title: '',
      },
      { id: 2, label: 'Node 2', title: '' },
      { id: 3, label: 'Node 3', title: '' },
      { id: 4, label: 'Node 4', title: '' },
      { id: 5, label: 'Node 5', title: '' },
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 },
    ],
  });

  const options = {
    layout: {
      hierarchical: false,
    },
    edges: {
      color: '#1D1D1D',
    },
    interaction: {
      hover: true,
      navigationButtons: true,
      tooltipDelay: 0,
    },
    nodes: {
      borderWidth: 0,
      borderWidthSelected: 0,
      color: '#0262C4',
      shape: 'circle',
      size: 1,
      shadow: {
        enabled: true,
        color: 'rgba(0,0,0,0.5)',
        size: 10,
        x: 5,
        y: 5,
      },
      font: {
        color: '#fff',
        size: 13,
        bold: {
          mod: 'bold',
        },
      },
    },
  };

  const events = {
    select: function (event) {
      var { nodes, edges } = event;
      console.log('Selected nodes:');
      console.log(nodes);
      console.log('Selected edges:');
      console.log(edges);
    },
    showPopup: (id) => { // node id
      const data = graph.nodes.map((el) => {
        if (el.id === id) {
          el.label = `sample node name`;
        }
        return el;
      });
      setGraph({ ...graph, nodes: data });
    },
  };

  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
      style={{ height: '450px' }}
    />
  );
}

export default RelationGraph1;

Really Appriciate for the help. Thanks !

Answer 1

I was able to update the label in hoverNode event like this:

    hoverNode: (e) => {
      const data = graph.nodes.map((el) => {
        if (el.id === e.node) return { ...el, label: "sample node name" };
        else return el;
      });

      const temp = { ...graph };
      temp.nodes = data;
      setGraph(temp);
    },

Sample: https://codesandbox.io/s/long-bird-4h444?file=/src/App.js:1235-1501