handleDrag resetting to 0,0 atfer clickUp event using react-dnd

Question

In a react project using the react library to drag and drop elements, react-dnd: The following code allows you to move around and resize two 'boxes.' The issue I am encountering arises when I release the mouse button after dragging a box. The values for 'left' and 'top' passed to the 'handleDrag' function (id, left, top) are set to 0,0. To resolve this problem, I implemented a workaround by only considering values other than 0,0. My question is: why is this happening, and what am I doing wrong?

import React, { useState, useEffect } from 'react';
import { useDrag } from 'react-dnd';
import { ResizableBox as ReactResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';
import update from 'immutability-helper';
import { Card } from 'react-bootstrap';

const GraphContainer = () => {
  const [items, setItems] = useState(
    JSON.parse(localStorage.getItem('graphItems')) || [
      { id: 1, left: 10, top: 10, width: 100, height: 100 },
      { id: 2, left: 200, top: 10, width: 100, height: 100 },
    ]
  );

  const handleDrag = (id, left, top) => {
    const itemIndex = items.findIndex(item => item.id === id);
    if (itemIndex !== -1) {
      const updatedItems = update(items, {
        [itemIndex]: {
          $merge: { left, top },
        },
      });

      console.log(left, top, updatedItems);
      if (left > 0 && top > 0) {
        setItems(updatedItems);
      }
    }
  };

  const resizeItem = (id, width, height) => {
    const itemIndex = items.findIndex(item => item.id === id);
    if (itemIndex !== -1) {
      const updatedItems = update(items, {
        [itemIndex]: {
          $merge: { width, height },
        },
      });
      setItems(updatedItems);
    }
  };

  return (
    <div style={{ width: '100%', height: '500px', position: 'relative', border: '1px solid black' }}>
      {items.map(item => (
        <ResizableBox
          key={item.id}
          id={item.id}
          left={item.left}
          top={item.top}
          width={item.width}
          height={item.height}
          onResize={(width, height) => resizeItem(item.id, width, height)}
          onDrag={(left, top) => handleDrag(item.id, left, top)}
        />
      ))}
    </div>
  );
};

const ResizableBox = ({ id, left, top, width, height, onResize, onDrag }) => {
  const [, drag] = useDrag({
    type: 'BOX',
    item: { id, left, top },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const handleResize = (event, { size }) => {
    onResize(size.width, size.height);
  };

  return (
    <ReactResizableBox
      width={width}
      height={height}
      minConstraints={[100, 100]}
      onResize={handleResize}
      style={{
        position: 'absolute',
        left: `${left}px`,
        top: `${top}px`,
        border: '1px solid #000',
        overflow: 'hidden',
      }}
      onDrag={dragEvent => onDrag(dragEvent.clientX, dragEvent.clientY)}
    >
    <Card style={{ width: '100%', height: '100%' }}>
      <div ref={drag} style={{ cursor: 'move', position: 'absolute', left: '0px', top: '0px', zIndex: '1' }}>
        <button>X</button>
      </div>
      <Card.Header>Card {id}</Card.Header>
      <Card.Body>Card Content</Card.Body>
    </Card>
    </ReactResizableBox>
  );
};

export default GraphContainer;

Here is what you would see: