Getting Started -> Adding Interactivity -> Handle Connections: use setEdges function and addEdge function to handle interactivity that connecting nodes manually

src/App.tsx

@@ -4,14 +4,13 @@ import ReactFlow, {
   Controls,
   applyEdgeChanges,
   applyNodeChanges,
+  addEdge,
 } from 'reactflow';
 
 // we have to import the React Flow styles for it to work
 import 'reactflow/dist/style.css';
 
-const initialEdges = [
+const initialEdges = [];
-  { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
-];
 
 const initialNodes = [
   {
@@ -40,6 +39,11 @@ const Flow = () => {
     [],
   );
 
+  const onConnect = useCallback(
+    params => setEdges(eds => addEdge(params, eds)),
+    [],
+  );
+
   return (
     <div style={{ height: '100vh' }}>
       <ReactFlow
@@ -47,6 +51,7 @@ const Flow = () => {
         onNodesChange={onNodesChange}
         edges={edges}
         onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
       >
         <Background />
         <Controls />