Dragging 2 or more items not working properly

[udarts]

So I am creating a tool where multiple draggable items could be add. The weird part is that only one items is being dragged correctly when I click my mouse and hold to drag. When I have a second item that I want to drag, it is not being dragged when I click my mouse and hold, but once I do mouse up and just move the cursor, it is suddenly moved. Not what I expect.

Here is how it looks like in code:

const [ activeDrags, setActiveDrags ] = useState(0);
const onStart = () => {
    setActiveDrags(activeDrags + 1);
};
const onStop = () => {
    setActiveDrags(activeDrags - 1);
};
const dragHandlers = {onStart: onStart, onStop: onStop};

return (
    <div id="bannerContent">
        <Draggable {...dragHandlers} bounds="#bannerContent">
            ........
        </Draggable>
        <Draggable {...dragHandlers} bounds="#bannerContent">
            ........
        </Draggable>
    </div>
)

Anything I am missing?