JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Network</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"
    ></script>
  </head>
  <body>
    <i class="fa fa-flag" style="visibility:hidden;"></i> 
    <div id="mynetwork"></div>
  </body>
</html>

CSS

#mynetwork {
  width: 100vw;
  height: 100vh;
  border: 1px solid lightgray;
}

JavaScript

const nodes = new vis.DataSet([
  { id: 1, label: '1', title: 'tooltip\ntest' },
  { id: 2, label: '2', shape: 'database' },
  { id: 3, label: '3', shape: 'box' },
  { id: 4, label: '4', shape: 'text' },
  { id: 5, label: '5', shape: 'triangle' },
  { id: 6, label: '6', shape: 'diamond' },
  { id: 7, label: '7', shape: 'dot' },
  { id: 8, label: '8', shape: 'star' },
  { id: 9, label: '9', shape: 'triangle' },
  { id: 10, label: '10', shape: 'triangleDown' },
  { id: 11, label: '11', shape: 'hexagon' },
  { id: 12, label: '12', shape: 'square' },
]);

const edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 6 },
  { from: 3, to: 4, color: 'orange' },
  { from: 3, to: 8 },
  { from: 6, to: 7 },
  { from: 6, to: 9 },
  { from: 4, to: 10 },
  { from: 4, to: 11 },
  { from: 5, to: 12 },
]);

const container = document.getElementById("mynetwork");
const data = {
  nodes: nodes,
  edges: edges,
};
const options = {
  layout: {
    hierarchical: {
      // 有向グラフの根が上、葉が下にくるよう配置するよう指定
      sortMethod: 'directed'
    }
  }
};
const network = new vis.Network(container, data, options);

network.on('click', (params) => {
  for (let node of nodes.get(params.nodes)) {
    node.color = 'orange';
	  nodes.updateOnly(node);
  }
});