Is there any way to connect two dragable cards with a dynamic line segment (with symbols at end points) in ReactJs?

I want a dynamic line segment to connect two react rnd components. The line segment end points should be symbols. Also whenever I move these components the line segment should move with them and if in case a 3rd component comes in between the line segment, the segment should choose some route by having turns/curves avoiding the 3rd or any other card.

Is it possible to create such thing in reactJS?

From a comment (but not in the original question):
> whenever another cards come in between the two connecting cards, the line should take turns to avoid them

There are many options, some of them messier than others, but all of them are essentially "render the lines into an SVG element which is higher up the element tree than all the boxes".

The "simplest" (but not "most straightforward") approach would be to have a grandparent component that contains all your boxes and is responsible for rendering the lines into the SVG. It might provide callbacks to addLine() / moveLine() / removeLine() which get passed down the element hierarchy, and each pair of boxes is responsible for calling those as appropriate:

function LineContainer() {
    const addLine    = (x1, y1, x2, y2) => { /* some magic */ return id; }
    const removeLine = (id) => { /* remove line */ };
    /* ... */
    return (<>
      <svg>
        { lines.map(([x1,y1,x2,y2]) => <line x1={x1} y1={y1} ... /> }
      </svg>

      <WhateverRendersTheBoxes addLine={addLine} removeLine={removeLine} />
    </>)
}

function BoxPair({ addLine, removeLine }) {
    /* ... */

    useEffect(() => {
        const id = addLine({ x1, y1, x2, y2 });
        return removeLine(id);
    }, [x1, y1, x2, y2]);

    return <>
      <Box x={x1} y={y1} />
      <Box x={x2} y={y2} />
    </>
}

Of course, your component hierarchy for rendering the boxes might be pretty messy, and prop-drilling isn't a lot of fun, so maybe it would be better as a Context:

const LineContext = createContext();

function LineContainer() {
    /* ... same as above ... */
    return (<>
      <svg>
        { lines.map(([x1,y1,x2,y2]) => <line x1={x1} y1={y1} ... /> }
      </svg>

      <LineContext.Provider value={{ addLine, removeLine }}>
        <WhateverRendersTheBoxes />
      </LineContext.Provider>
    </>)
}

function BoxPair() {
    const { addLine, removeLine } = useContext(LineContext);
    /* ... same as above ... */
}

I would recommend a different approach which keeps the responsibility (and logic) for line drawing within the BoxPair component, while rendering the <line> wherever it needs to be in the element hierarchy for your z-index stacking to work.

To do this, you can use a portal. Portals simply render part of your component tree somewhere else in the element hierarchy, outside the current component. You could create your SVG element as before, and each BoxPair can render its connecting line higher up the element tree:

function LineContainer() {
    const [lineContainer, setLineContainer = useState();
    return (<>
      <svg ref={setLineContainer} />

      <WhateverRendersTheBoxes lineContainer={lineContainer} />
    </>);
}

function BoxPair({ lineContainer }) {
    /* ... */

    return <>
      <Box x={x1} y={y1} />
      <Box x={x2} y={y2} />

      { lineContainer &&
        createPortal(
          <line x1={pos1.x} y1={pos1.y} ... />,
          lineContainer
        ) }
    </>
}

Sandbox

For simplicity here I'm passing the lineContainer element reference directly as a prop, but as before you could use a context:

    <LineContainerContext.Provider value={lineContainer}>
      <WhateverRendersTheBoxes />
    </LineContainerContext.Provider>
...
    const lineContainer = useContext(LineContainerContext);

Sandbox