edges to the node steps are not rendering in react-flow-renderer

Question

Iam trying to display steps in the data.js file as nodes and tried to connect those edges. But the edges are only visible. in the page. I have used [react-flow-renderer] package1.

When i refresh the page the edges are visible for not even a second.

my react component

import React, { Component } from 'react'
import data from '../data'
import ReactFlow, {addEdge} from 'react-flow-renderer'


export class Pro2 extends Component {
    constructor() {
        super()
        this.state = {
            steps:data.map((step, index) => ({ id: step.id, data: {label: step["step-name"] }, position: {x: 500, y:100 * (index + 1)}})),
            tasks:[],
            sedges: data.slice(0, data.length - 1).map((step, index) => ({id:"e"+step.id+data[index+1].id, source: step.id, target: data[index+1].id, animated: true}))
        }
        console.log(this.state.steps, this.state.sedges)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(t) {
        //console.log("clicked...............clicked at id", t.id, typeof t.id)
        let sid = parseInt(t.id)
        console.log("data length", data.length)
        for(let i in data){
            const step = data[i]
            if(step.id == sid){
                let posX
                if(sid%2 == 0) posX = 200
                else posX = 800
                const tasknodes = step.tasks.map((task, index) => ({id: task.id, data: {label: task["name"]+"(weight: "+task.weight+")"}, position: {x:posX, y:100 * (index + sid)}}))
                this.setState(prevState => ({
                    tasks: tasknodes
                }))
            }
            else{
                // console.log("elseeeeeeeeeeeeeee")
            }
        }
        
    }

    render() {
        const graphStyles = { width: '100%', height: '500px' };
        const elements = this.state.steps.concat(this.state.sedges).concat(this.state.tasks)
        
  
        return (
            <div>
                  {/* {BasicGraph()} */}
                  <ReactFlow  onElementClick={this.handleChange} elements={elements} style={graphStyles} />
                  
            </div>
        )
    }
}

export default Pro2

this is the json data i have used data.js

const data = [
    {   
        "id": 1,
        "step-name": "The First Step",
        "tasks": [
            {
                "id": "11",
                "name": "task-11",
                "weight": 50
            },
            {
                "id": "12",
                "name": "task-12",
                "weight": 60
            }
        ]
    },
    {   
        "id": 2,
        "step-name": "The Midlle Step",
        "tasks": [
            {
                "id": "21",
                "name": "task21",
                "weight": 5
            },
            {
                "id": "22",
                "name": "task-22",
                "weight": 60
            }
        ]
    },
    {
        "id": 3,
        "step-name": "The Last Step",
        "tasks": [
            {
                "id": "31",
                "name": "task31",
                "weight": 45
            },
            {
                "id": "32",
                "name": "task-32",
                "weight": 16
            }
        ]
    }
]

export default data

Answer 1

As pointed out in the docs the ids of the nodes and edges have to be strings.