I’m new at react flow and trying to build edges but get error:

[React Flow]: Couldn’t create edge for source handle id: “undefined”, edge id: edge-operation-0-0-operation-1-0.

I’m also trying to save edges and nodes in state and check with console.log, but can’t see edges at render.

innerData came from component.

Where i am wrong?

const [nodes, setNodes] = useState([])
const [edges, setEdges] = useState([])

useEffect(() => {
        const tempNodes = []
        const tempEdges = []

        innerData.forEach((action, i) => {
            const isRowCollapsed = collapsedRows[i]
            const layersCount = isRowCollapsed ? 1 : getLayersCount(action)

            action.operations.forEach((operation, j) => {
                const x = calculateXOffset(
                    context.start,
                    new Date(operation.start),
                    columnWidth,
                    context.measure
                )

                const nodeId = `operation-${i}-${j}`
                tempNodes.push({
                    id: nodeId,
                    position: {
                        x: x,
                        y: rowHeight * i,
                    },
                    data: { ...operation, columnWidth },
                    type: 'customNode',
                    draggable: false,
                })

                if (!operationNodesMap[operation.id]) {
                    operationNodesMap[operation.id] = []
                }
                operationNodesMap[operation.id].push(nodeId)
            })
        })

        // Generate edges after generating nodes
        Object.values(operationNodesMap).forEach(nodesWithSameId => {
            if (nodesWithSameId.length > 1) {
                for (let i = 1; i < nodesWithSameId.length; i++) {
                    tempEdges.push({
                        id: `edge-${nodesWithSameId[i - 1]}-${
                            nodesWithSameId[i]
                        }`,
                        source: nodesWithSameId[i - 1],
                        target: nodesWithSameId[i],
                        animated: true,
                    })
                }
            }
        })

        // Update state with collected nodes and edges
        setNodes(tempNodes)
        setEdges(tempEdges)
    }, [
        innerData,
        context,
        columnWidth,
        rowHeight,
        getLayersCount,
        collapsedRows,
    ])

    const CustomNodeComponent = ({ data }) => {
        const context = useSelector(state => state.gantt)
        const { columnWidth, start, end } = data

        const width = useMemo(() => {
            const durationMillis =
                new Date(end).getTime() - new Date(start).getTime()
            const columnDurationMillis = context.measure * 60 * 60 * 1000
            return (durationMillis / columnDurationMillis) * columnWidth
        }, [start, end, columnWidth, context.measure])

        return (
            <Box w={`${width}px`}>
                <GanttGraphItem
                    start={data.start}
                    end={data.end}
                    id={data.id}
                    data={data.data}
                    color={data.color}
                    meta={data}
                    barChart={barChart}
                    isTooltip={isTooltip}
                    tooltip={tooltip}
                />
            </Box>
        )
    }

    const nodeTypes = useMemo(
        () => ({
            customNode: CustomNodeComponent,
        }),
        [barChart]
    )

            <div style={{ width: '100%', height: '100%' }}>
                    <ReactFlow
                        nodes={nodes}
                        edges={edges}
                        nodeTypes={nodeTypes}
                        {...options}
                        onNodeMouseEnter={() => {}}
                    >
                        <Background />
                    </ReactFlow>
                </div>