error : bounds="parent" is working strangely.

[dewrain331]

trafficstars

These 2 draggable elements have props bounds="parent". I expected they would bind in the silver border, but they aren't.

I need some help. Here's my code.

index.js

import { useState, useRef } from "react";
import Draggable from "react-draggable";

import {
  Drawer,
} from "./canvas.style";
import Button from "../../components/button";
import FigureModal from "./figureModal";

const Canvas = () => {
  const [mode, setMode] = useState("read");
  const [showFigureModal, setShowFigureModal] = useState(false);
  const canvasSize = {
    width: "700",
    height: "700",
  };
  const [figures, setFigures] = useState([]);
  const nodeRef = useRef(null);

  const changeMode = () => {
    if (mode === "read") {
      alert("The mode is edit now.");
      setMode("edit");
    } else if (mode === "edit") {
      alert("The mode is read now.");
      setMode("read");
    }
  };

  return (
<Drawer
  id="drawer"
  width={`${canvasSize.width}px`}
  height={`${canvasSize.height}px`}
>
  {figures.length > 0 &&
    figures.map((v) => (
      <Draggable
          nodeRef={nodeRef}
          key={v.id}
          bounds="parent"
          disabled={mode === "read"}
      >
          <div
            style={{
              width: `${v.width}px`,
              height: `${v.height}px`,
              border: `3px solid ${v.color}`,
              borderRadius: v.figure === "Circle" ? "50%" : "0%",
            }}
            key={v.id}
            ref={nodeRef}
        />
    </Draggable>
  ))}
</Drawer>
  );
};

export default Canvas;