[React Flow]: Handle: No node id found. Make sure to only use a Handle inside a custom Node.

[ashiyana10]

Describe the Bug

I have created ReactFlow Canvas with custom node Canvas file App.js

<div className="dndflow" style={{ height: 1000, width: 1000 }}>
      <ReactFlowProvider>
        <div className="reactflow-wrapper" ref={reactFlowWrapper}>
          <ReactFlow
            nodes={nodes}
            style={{ position: "relative" }}
            edges={edges}
            onNodesChange={onNodesChange}
            onEdgesChange={onEdgesChange}
            onConnect={onConnect}
            onInit={setReactFlowInstance}
            onDrop={onDrop}
            nodeTypes={nodeTypes}
            onDragOver={onDragOver}
            fitView
          >
            <Controls />
          </ReactFlow>
        </div>
        <InputField />
      </ReactFlowProvider>
    </div>

Custom node file elements.js

import { useEffect, useState } from "react";
import React from "react";
import { Handle, Position } from "reactflow";

const InputField = () => {
  const [inputValue, setInputValue] = useState("12"); // State to manage the input value
  const onDragStart = (event, nodeType) => {
    event.dataTransfer.setData("application/reactflow", nodeType);
  };

  return (
    <>
      <Handle type="target" id="a" position={Position.Bottom} />
      <input
        type="text"
        id="text"
        style={{ backgroundColor: "red" }}
        onChange={(e) => setInputValue(e.target.value)}
        value={inputValue}
        onDragStart={(event) => onDragStart(event, "textUpdater")}
        draggable
      />
      <Handle type="source" id="a" position={Position.Bottom} />
    </>
  );
};

export default InputField;

But getting warning regarding [React Flow]: Handle: No node id found. Make sure to only use a Handle inside a custom Node.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create ReactJS project
2. Install the ReactFlow library
3. Create custom node. Refer this for https://reactflow.dev/learn/customization/custom-nodes

Expected behavior

Create dynamic edges between nodes without warning

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response