如何使reactstrap模式的动态内容可调整大小和可拖动？

npm install react-resizable react-draggable

import { Resizable } from 'react-resizable';
import Draggable from 'react-draggable';

const ResizableContainer = () => {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  const handleResize = (event, { size }) => {
    const { width, height } = size;
    setWidth(width);
    setHeight(height);
  };

  return (
    <Resizable
      width={width}
      height={height}
      onResize={handleResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <div>
        {/* 内容 */}
      </div>
    </Resizable>
  );
};

const DraggableContainer = () => {
  const handleDrag = (event, { deltaX, deltaY }) => {
    // 处理拖动事件
  };

  return (
    <Draggable
      handle=".handle"
      defaultPosition={{ x: 0, y: 0 }}
      position={null}
      grid={[1, 1]}
      scale={1}
      onStart={handleDrag}
      onDrag={handleDrag}
      onStop={handleDrag}
    >
      <div className="handle">
        <ResizableContainer />
      </div>
    </Draggable>
  );
};

const App = () => {
  return (
    <div>
      <DraggableContainer />
    </div>
  );
};