projectstorm/react-diagrams

Hey Everyone. lot's of respect for everyone who is in this community.
i am drawing a projectstrom/react-diagrams. I tried creating a view, by following the instructions at
https://projectstorm.gitbook.io/react-diagrams/getting-started.
i have develop 3 nodes manually. but now i want to create dynamically nodes through map function. i am not getting an idea that how i do this.any one help me please.
below is my code.

import createEngine, {DefaultLinkModel,DefaultNodeModel,DiagramModel } from '@projectstorm/react-diagrams'
import {CanvasWidget} from '@projectstorm/react-canvas-core';
import '../App.css'

const MindMap = () => {
const engine = createEngine();
const node1 = new DefaultNodeModel({
name: 'Node 1',
color: 'rgb(0,192,255)',
});

node1.setPosition(100, 100);
let port1 = node1.addOutPort('In');

// node 2
const node2 = new DefaultNodeModel({
name: 'Node 2',
color: 'yellow',
});
node2.setPosition(59, 50);
let port2 = node2.addOutPort('OUT');

const node3 = new DefaultNodeModel({
name: 'Node 3',
color: 'rgb(0,192,130)',
});
node3.setPosition(80, 6);
let port3 = node3.addOutPort('Out');

const link = port1.link(port2);
const link1 = port1.link(port3)

// link.addLabel('Hello World!');

const model = new DiagramModel();
model.addAll(node1, node2, node3, link, link1);
engine.setModel(model);

return ( 
    <div>
<div style={{height:'100vh', width:'100%', backgroundColor:'aliceblue'}}>
<CanvasWidget className="canvas" engine={engine} />
</div>
</div>
)  

}

export default MindMap