I want a workflow feature, using react flow, but I want to be able to drag and drop components into each node. Maybe this is possible somehow by creating custom nodes with react flow?
But I’m having a hard time wrapping my head around how I could make custom nodes as droppable areas for draggable elements.

Any thoughts are greatly appreciated.

In Reactflow Drag and Drop option, i want to drop custom node from sidebar to another node (like specific for drop),don’t want to drop anywhere on the right pane , want to specific the dropping area

const onDrop = useCallback(
  (event) => {
    event.preventDefault();

    const type = event.dataTransfer.getData('application/reactflow');

    if (typeof type === 'undefined' || !type) {
      return;
    }

    if (type === "AddNode") { 
      const position = screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });

      const newNode = {
        id: getId(),
        type,
        position,
        data: { label: `${type} node` },
      };

      setNodes((nds) => nds.concat(newNode));
    }
  },
  [screenToFlowPosition]
);