React-xarrows: стрелки накладываются друг на друга при рендере

На диаграмме между таблицами есть связи, они содержатся в массиве foreignKeys внутри объекта area.

Внутри этого же объекта есть массив таблиц tables. При отрисовке таблиц и стрелок-связей между ними я использую библиотеки react-draggable и react-xarrows.

С помощью этого метода отрисовываются стрелки:

const getArrows = () => {
        let arrows = [];

        diagram.areas?.map((area) => {
            area.foreignKeys?.map((link, key) => {
                
                arrows.push(
                    <div >
                      <Xarrow
                        start={link.sourceTableName}
                        end={link.targetTableName}
                        path={"straight"} //
                        headShape={"arrow1"}
                        headSize={12}
                        startAnchor={"auto"}
                        endAnchor={"auto"}
                        zIndex={arrowIsShawn}
                        color={area.color}
                        strokeWidth={arrowWidth}
                        key={link.name}
                        passProps={{
                            onClick: (event) => onDeleteArrowHandler(link.name)
                        }}                        
                    />                      
                    </div>                    
                );
            });
        });
        return arrows;
    };

Проблема в том, что между таблицами может быть не она связь, а три-четыре и больше. Я попробовала сделать отступы, но в таком случае верх стрелки может прятаться за таблицу:

let endAnchorVariants = {};
                let startAnchorVariants = {};
                switch (key % 2) {
                    case 0:
                        startAnchorVariants = {
                            position: "auto",
                            offset: { x: 10 }
                        }
                        endAnchorVariants = {
                            position: "auto",
                            offset: { x: 10 }
                        };
                        break;
                    case 1:
                        startAnchorVariants = {
                            position: "auto",
                            offset: { y: 10 }
                        }
                        endAnchorVariants = {
                            position: "auto",
                            offset: { y: 10 }
                        };
                        break;
                    case 2:
                        startAnchorVariants = {
                            position: "auto",
                            offset: { y: 12 }
                        }
                        endAnchorVariants = {
                            position: "auto",
                            offset: { y: 12 }
                        };
                        break;                    
                    default:
                        startAnchorVariants = {
                            position: "auto",
                            offset: { x: 12 }
                        }
                        endAnchorVariants = {
                            position: "auto",
                            offset: { x: 12 }
                        };
                }
arrows.push(
                    <Xarrow
                        start={link.sourceTableName}
                        end={link.targetTableName}
                        path={"straight"} //
                        headShape={"arrow1"}
                        headSize={14}                        
                        startAnchor={startAnchorVariants}
                        endAnchor={endAnchorVariants}
                        zIndex={arrowIsShawn}
                        color={arrowColor}
                        strokeWidth={arrowWidth}
                        key={link.name}
                        passProps={{
                            onClick: (event) => onDeleteArrowHandler(link.name)
                        }}
                    />
                );
            });
        });
        return arrows;
    };

Я пыталась создать несколько компонентов Xarrow внутри arrows.push, задав им разные endAnchors, но это не помогло: стрелок просто стало больше, независимо от их реального количества в массиве foreignKeys.

Как можно прописать условие, чтобы при совпадении targetTableName и sourceTableName стрелка сдвигалась к верху/низу/левому/правому краям таблицы? При этом имена у link разные: "ИМЯ_ИСХОДНОЙ ТАБЛИЦЫ_FK1" и далее по номерам FK2, FK3 и т.д.