Component won't drop off until mouse click

[Galower1]

Here I have the parent component ChatWindow which includes the DragDropProvider and the DragDropSensors

const ChatWindow: Component = () => {
  const { messages } = useChats();

  return (
    <DragDropProvider>
      <DragDropSensors />
      <div class="h-1/3 w-3/5 bg-slate-800 text-white relative">
        <For each={messages}>{(message) => <UserAvatar {...message} />}</For>
      </div>
    </DragDropProvider>
  );
};

And the child component UserAvatar

const UserAvatar: Component<Message> = (props) => {
  const [opacity, setOpacity] = createSignal("opacity-0");
  const dragable = createDraggable(props.username);

  onMount(() => setTimeout(() => setOpacity("opacity-100"), 100));

  return (
    <div use:dragable class={`${opacity()}`}>
      <img class="h-32 w-22" src={props.avatar} alt="avatar" />
    </div>
  );
};

Once I stop dragging the component, this one seems to keep following the mouse cursor until I do a left click.

The site examples seem to drop off fine as soon as I stop dragging.

Tried adding the DragOverlay component but it didn't change the behavior apart from releasing the component on where I click with the mouse.

[martinpengellyphillips]

Because you have an image, the browser default drag and drop behaviour is getting in the way. Set pointer-events-none on the image class and it should work as expected.

[Galower1]

Because you have an image, the browser default drag and drop behaviour is getting in the way. Set pointer-events-none on the image class and it should work as expected.

Thank you! it works perfectly now.