Erroring out while rendering

[Balakrishnan Kumaravel]

Hi,

Getting the below error.

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Basically I am having a file called networkgraph.tsx and having this code inside it and calling this method to render the graph. When this method gets executed, I am getting the above error. Am I missing something?

import * as React from "react";
const Graph = require("react-graph-vis");

export default function NetworkGraph(): JSX.Element {
const graph = {
nodes: [
{ id: 1, label: "Node 1", title: "node 1 tootip text" },
{ id: 2, label: "Node 2", title: "node 2 tootip text" },
{ id: 3, label: "Node 3", title: "node 3 tootip text" },
{ id: 4, label: "Node 4", title: "node 4 tootip text" },
{ id: 5, label: "Node 5", title: "node 5 tootip text" }
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]
};

const options = {
layout: {
hierarchical: true
},
edges: {
color: "#000000"
}
};

const events = {
select(event: any): void {
const { nodes, edges } = event;
console.log("Selected nodes:");
console.log(nodes);
console.log("Selected edges:");
console.log(edges);
}
};

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

Thanks,
Bala.

[Balakrishnan Kumaravel]

Is there any specific version on packages I need to use to make this work?