Draggable doesn't seem to work when html elements are used directly in dnd context

[Rahul-krishnakumar]

There's a weird issue where I cannot create a draggable element directly inside the DndContext, despite passing all the needed props to it. But it seems to work fine when I move all the logic to a custom component and then use the component inside DndContext. What is the reason for this?

This doesn't work

const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: "testdraggable",
  });

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
      }
    : undefined;

return (
    <>
      <DndContext>
        <h1 ref={setNodeRef} {...listeners} {...attributes} style={style}>
          Testing
        </h1>
      </DndContext>
    </>
  );

But this does

return (
    <>
      <DndContext>
           <Draggable />
      </DndContext>
    </>
  );

export const Draggable = () => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: "testdraggable",
  });

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
      }
    : undefined;

  return (
    <h1 ref={setNodeRef} {...listeners} {...attributes} style={style}>
      Testing
    </h1>
  );
};