Как изменить размер SVG-компонентов с помощью реагирующего перетаскивания

Question

Заранее спасибо, сейчас я использую React DND, чтобы включить функцию перетаскивания для форм SVG в контейнере. Я хотел бы изменить размер любой формы с помощью мыши (перетаскивание с любой из 4 сторон). Как выполнить sh эту функцию, используя библиотеку React Drag and Drop. Как я узнал, я понял, что с помощью React Drag and Drop возможно только перемещение содержимого. Я также пытался использовать библиотеку React Re Resizable в Drag and drop. Но поскольку компоненты работают с библиотекой SVG, библиотека Resizable не работает.

Есть ли способ обойти эту проблему, или что-нибудь в React Library для изменения размеров компонентов / SVG.

Ниже находится песочница URL и код

import React from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

const style = {
  background: "#f0f0f0"
};

const App = () => (
  <svg>
    <Resizable
      style={style}
      defaultSize={{
        width: 200,
        height: 200
      }}
    >
      <rect height={200} width={200} />
    </Resizable>
  </svg>
);

render(<App />, document.getElementById("root"));


https://codesandbox.io/s/reverent-liskov-hcq75?fontsize=14&hidenavigation=1&theme=dark