Reactjs 使用React和Vis.Js在节点上添加Infobox

我是新来的。我在React中创建了一个应用程序，它使用vis.js显示有向图。现在我想在vis.js方法提供的mousehover事件上的每个节点上添加infobox。我的React组件的代码如下所示

import React, { Component } from 'react';
import './App.css';
import Graph from 'react-graph-vis';
import _ from 'underscore';
import $ from 'jquery';

let graph = {
  nodes: [
      {id: 1, label: 'node 1', x: 0, y: 200},
      {id: 2, label: 'node 2', x: 100, y: 50},
      {id: 3, label: 'node 3', x: 0, y: 400},
      {id: 4, label: 'node 4', x: 400, y: 400},
      {id: 5, label: 'node 5', x: 400, y: 0}
    ],
  edges: [
      {from: 1, to: 2,},
      {from: 1, to: 3,},
      {from: 1, to: 4,},
      {from: 1, to: 5,}
    ]
};

let width = 800;
let height = 700;

let options = {
    width: width + 'px',
    height: height + 'px',
      edges:{
        arrows: {
            to:     {enabled: true, scaleFactor:1, type:'arrow'},
            middle: {enabled: false, scaleFactor:1, type:'arrow'},
            from:   {enabled: false, scaleFactor:1, type:'arrow'}
        },
      },
      nodes:{
        shape:'square'
      },
      interaction:{
        dragNodes:false,
        hover:true
      },
      physics: false
};

let events = {
    onhover: function(event) {
        // eslint-disable-next-line
        var { nodes, edges } = event;
        console.log("Selected nodes:");
        var nodeid = nodes[0];
        var selectedNode = _.find(graph.nodes,{id:nodeid});
        console.log(selectedNode);


    }
}


class App extends Component {


 constructor() {
  super()
  console.log("In constructer");

 }

 componentDidMount() {
  console.log("in componentDidMount");
 }

 componentWillUnmount() {
  console.log("in componentWillUnmount");

 }

render() {
 return (
  <div className="App">

    <p className="App-intro">
      To get started, edit <code>src/App.js</code> and save to reload.
    </p>
    <ExampleGraph initialGraph={graph}/>
  </div>
 );
}
}

class ExampleGraph extends Component {

constructor({initialGraph}){
 super();
 this.state = {
   graph:initialGraph

 };
 }




render() {
  return (
   <div id="mynetwork" className="ExampleGraph">
      <Graph graph={this.state.graph} options={options} events={events} />
  </div>
  );
 }
}
export default App;

在事件中，当鼠标位于任何节点上时，将调用“onhover”方法。我可以在selectedNode对象中获取所有节点的详细信息。现在我想在该节点上显示一个包含所有详细信息的信息框。任何人都知道我怎样才能做到这一点