Создание кастомных стрелок с react-xarrows

Коллеги! Подскажите, пожалуйста, кто пользовался библиотекой react-xarrows: в моем проекте таблицы диаграммы соединены стрелками. Пользователи хотели бы сами настраивать длину и изгибы стрелок, чтобы они огибали таблицы так, как им удобнее. Можно ли настроить такое с помощью ресурсов react-xarrows? Искала в документации, пока не смогла найти, как такие фичи настроить. Может, кто-то знает другую библиотеку подобных компонентов?

Кроме того, нужно настроить стрелки так, чтобы пользователи при желании могли делать конкретную стрелку невидимой. Сейчас компонент xarrows принимает такие пропсы:

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

        diagram.areas?.map((area) => {
            area.foreignKeys?.map((link) => {
               
                arrows.push(
                    <Xarrow
                        start={link.sourceTableName}
                        end={link.targetTableName}
                        path={"straight"} // grid
                        headShape={"arrow1"}
                        headSize={10}
                        color={area.color}
                        strokeWidth={1}
                        id={link.name}
                        
                    />
                );
            });
        });
        return arrows;
    };