I am creating a component tree visualisation with Dagre and React-flow, and unfortunately I face some difficulties. The edges are correct, all have the right identifiers for the source and the target, but if I don't use the Handle component provided by react-flow-renderer, the handles (small dots, connecting points for edges) won't appear. Even when I set the element targetPosition and sourcePosition. I think el.targetPosition and el.sourcePosition don't do anything. Most of the implementation below is from React-flow official website, and they don't use Handle components. Handle id is null.

You can also find a snapshot below.

1. Rendering the elements

   {elements && (
   <ReactFlowProvider>
     <ReactFlow
       elements={elems}
       nodeTypes={{ reactComponent: ComponentNode }}
       onNodeMouseEnter={(_e, node) => highlightComponent(node, false)}
       onNodeMouseLeave={(_e, node) => removeHighlight(node)}
       onPaneClick={resetHighlight}
     >
   
     </ReactFlow>
   </ReactFlowProvider>
   

2. Rest of the code

   const positionElements = (elements, dagreGraph, direction) => {
     return elements.forEach((el) => {
       if (isNode(el)) {
         if (direction === GraphLabels.topToBottom) {
           dagreGraph.setNode(el.id, {
            width: nodeWidth,
            height: baseNodeHeight + el.data.linesOfCode,
          });
        }
      } else {
        dagreGraph.setEdge(el.source, el.target);
      }
    });
   };
   
   
   export const getLayoutedElements = (elements, direction) => {
   const dagreGraph = new dagre.graphlib.Graph(); // building the graph
   dagreGraph.setDefaultEdgeLabel(() => ({}));
   dagreGraph.setGraph({ rankdir: direction });
   
   positionElements(elements, dagreGraph, direction);
   
   dagre.layout(dagreGraph);
   
   return elements.map((el) => {
    if (isNode(el)) {
      const nodeWithPosition = dagreGraph.node(el.id);
      Vertical scaling
      if (direction == GraphLabels.leftToRight) {
        do this.
      }
      if (direction == GraphLabels.topToBottom) {
        el.targetPosition = 'bottom';
        el.sourcePosition = 'top';
        el.position = {
          x: someValue,
          y: someOtherValue,
        };
      }
     }
   
    return el;
    });
   };