Как нарисовать динамическую стрелку между компонентами в ReactJS?

Что если нам нужно нарисовать стрелку между двумя компонентами, при том что эти компоненты могут двигаться. На первый взгляд задачка не из простых. Библиотека react-xarrows решает данную задачу за несколько строк кода.
Устанавливаем библиотеку в свой проект командой:
npm i react-xarrows
В примере создаем два блока и привязываем к ним ref ссылки. Чтобы нарисовать стрелку, импортируем компонент , и просто передаем ему ref ссылки. В результате получаем стандартную синюю стрелку, которая соединяет две ближайшие грани компонентов. Стрелку можно кастомизировать, например, задавать толщину и цвет.
Подробнее ознакомиться с библиотекой можно по ссылке — https://www.npmjs.com/package/react-xarrows Типичный Веб Разработчик