Перемещение видимой области на картинке с учетом всех соотношений сторон (React)

У меня есть область для загрузки изображения с соотношением сторон 4:3. После загрузки появляется сетка из различных соотношений: 1:1, 3:4, 16:9, 16:5. В центре этой сетки находится видимая область, остальная часть затемняется. Пользователь может навести курсор на область, которая представляет собой пересечение всех разрешений. По клику на эту область он может перемещать её куда угодно, но в пределах изображения. Если пользователь переместит область, например, в левый верхний угол, все соотношения должны подстроиться так, чтобы область оказалась вверху слева. При этом прямоугольники 3:4 и 16:9 двигаются вместе с областью, но медленнее (примерно в 2 раза) по сравнению с двумя другими прямоугольниками.

Вложу ниже текущую реализацию, в которой сетка представлена изображением и перемещается по области. Однако сама реализация неверна, поскольку разрешения не подстраиваются под область.