How to Enable Dragging in this react Component?

Question

This code, is drawing a rectangle in the page, using the geometry. The Rectangle will be generated only using the basic styling attributes like height, width, left and top. The dragging is not getting enabled. I tried using react-draggable library and basic drag features. I want to drag the Rectangle without messing up the dimensions and positioning of it. How can I do that ?. Where I am getting wrong?

Here is my code.

import React from 'react';
import Draggable from 'react-draggable';

function Rectangle(props) {
  const { geometry } = props.annotation;
  if (!geometry) return null;

  function onDragStart() {
    console.log("Drag has started");
  }

  function onDragEnd() {
    console.log("Drag has ended");
  }

  return (
    <Draggable
      onStart={onDragStart}
      onEnd={onDragEnd}
      defaultPosition={{
        x: geometry.x,
        y: geometry.y
      }}
    >
      <div  
        style={{ 
          position: 'absolute',
          left: `${geometry.x}%`,
          top: `${geometry.y}%`,
          height: `${geometry.height}%`,
          width: `${geometry.width}%`,
          backgroundColor: 'rgba(128, 0, 0, 0.5)',
          border: '2px dashed red',
          boxSizing: 'border-box',
          transition: 'box-shadow 0.21s ease-in-out',
          cursor: 'move'
        }}
        className={props.className}
      />
    </Draggable>
  );
}

Rectangle.defaultProps = {
  className: '',
  style: {},
};

export default Rectangle;

Appreciate Your Help!

Thanks In Advance.