Почему Rnd компонент не располагается относительно родителя при позиционировании left и top? как это исправить?

Почему Rnd компонент не располагается по значениям left и top относительно родителя? как это исправить? (нужно с помощью left и top расположить Rnd блок в родительском блоке) Также заметил что блок вовсе выходит из родителя и перетаскивании

import "./App.css";
import { Rnd } from "react-rnd";

const style = {
  fontSize: "12pt",
  left: "88mm",
  lineHeight: 1.2,
  top: "17mm",
  width: "90mm",
};
export default function App() {
  return (
    <div
      style={{
        backgroundColor: "green",
        width: "500px",
        height: "500px",
        position: "relative",
      }}
    >
      asdas
      <Rnd
        style={{ ...style, position: "absolute" }}
      >
        Rnd
      </Rnd>
    </div>
  );
}

Код здесь https://replit.com/@foxxyfly/AcceptableUntriedViruses#src/App.jsx