issue with the edge creation while creating a react-flow structure

Using react-flow to develop a flow I am able to get the nodes but I am facing issue with the edges while rendering. It is giving the error react-flow:800 as

"typeof.js:9 [React Flow]: Couldn't create edge for source handle id: 1; edge id: e1-2. Help: https://reactflow.dev/error#800"

these are my imports:

import ReactFlow, { addEdge, Background, Controls, MiniMap, useNodesState, useEdgesState, Handle, Position } from 'react-flow-renderer';

my react flow configuration is as follows:

<ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          nodesDraggable={false}
          nodeTypes={nodeTypes}
        >
          <MiniMap />
          <Controls />
          <Background />
        </ReactFlow>

code snippet for creating the nodes and an edge is as follows:

const newNode = {
      id: (nodes.length + 1).toString(),
      type: 'trigger',
      action,
      data: {
        label: (
          <div>
            <TriggerNodeLabel data={action} />
            <Handle type="source" position={Position.Right} id={`${(nodes.length + 1).toString()}`}/>
            <Handle type="target" position={Position.Left} id={`${(nodes.length + 1).toString()}`}/>
          </div>
        )
      },
      position: { x: Math.random() * 250, y: Math.random() * 250 },
      sourcePosition: 'right',
      targetPosition: 'left',
      style: {
        padding: '20px',
        minWidth: '250px',
        minHeight: '150px',
        maxHeight: '100px',
        borderRadius: '20px',
        border: '2px solid black'
      }
    };
  
    const extraNode = {
      id: (nodes.length + 2).toString(),
      type: 'conditionInitial', // Set the type as 'conditionInitial'
      data: {
        label: (
          <div>
            <ConditionInitialNodeLabel onClick={() => openModal(extraNode.id)} />
            <Handle type="source" position={Position.Right} id={`${(nodes.length + 2).toString()}`}/>
            <Handle type="target" position={Position.Left} id={`${(nodes.length + 2).toString()}`}/>
          </div>
        )
      },
      position: { x: newNode.position.x + 300, y: newNode.position.y },
      sourcePosition: 'right',
      targetPosition: 'left',
      style: {
        padding: '20px',
        minWidth: '250px',
        minHeight: '150px',
        maxHeight: '100px',
        borderRadius: '20px',
        border: '2px solid black' // Add border style here
      }
    };
    const newNodes = nodes.length === 0 ? [newNode, extraNode] : [newNode];
    setNodes((nds: any) => nds.concat(newNodes));
    if (nodes.length === 0) {
      console.log("**** first edge creation ******");
      const newEdge = {
        id: `e${newNode.id}-${extraNode.id}`,
        source: newNode.id,
        target: extraNode.id,
        type: 'straight',
        sourcePosition: Position.Right,
        targetPosition: Position.Left,
        sourceHandle: `${newNode.id}`,
        targetHandle: `${extraNode.id}`,
        style: { stroke: '#555', strokeWidth: 2 }

      };
    setEdges((eds: any) => eds.concat(newEdge));
    }

I tried using a normal edge,also mentioned the sorceHandle and targetHandle, and then I have also tries given it through component as mentioned in the codebut giving the same error. Can anyone help me with this?