Strange "Ghost" Silhouette of Draggable Element When Using Non-integer (i.e., numbers with decimals)

[husky-blue]

trafficstars

If you set the state of a Draggable element's position to a non-integer (i.e., a number with decimals, like 123.4), you will get a strange silhouette of the element when dragging it. Consider this example:

import { useState } from 'react';

interface PositionModel {
  x: number;
  y: number;
}

const MyComponent = () => {
  const [pos, setPos] = useState({ x: 0, y: 0 } as PositionModel);
  const handleDragStop = (_e: DraggableEvent, position: DraggableData) => {
    setPos({ x: 456.2, y: 229.8 });
  };

  return (
    <Draggable
      position={pos}
      onStop={handleDragStop}
    >
      <div>I am an element</div>
    </Draggable>
  );
};

After the handleDragStop function is triggered and you go to drag the component again, you'll see something similar to this: