Only the text is visible on the dragged element

Tried with a new solidjs project

https://github.com/thisbeyond/solid-dnd/assets/32246972/1fbbecf4-a7d1-4dcc-bf81-c83da5798c96

The code is basically the vertical example with a component:

import { useDragDropContext } from "@thisbeyond/solid-dnd";
import {
  DragDropProvider,
  DragDropSensors,
  DragOverlay,
  SortableProvider,
  createSortable,
  closestCenter,
} from "@thisbeyond/solid-dnd";
import { createSignal, For } from "solid-js";

const Button = (props: any) => {
  return (
    <button class="bg-black rounded-full text-white p-4">
      {props.children}
    </button>
  );
};

const Sortable = (props: any) => {
  const sortable = createSortable(props.item);
  // @ts-ignore
  const [state] = useDragDropContext();
  return (
    <div
      // @ts-ignore
      use:sortable
      classList={{
        "opacity-25": sortable.isActiveDraggable,
        "transition-transform": !!state.active.draggable,
      }}
      class="draggable-container"
    >
      <Button>Button {props.item}</Button>
    </div>
  );
};

export const SortableVerticalListExample = () => {
  const [items, setItems] = createSignal([1, 2, 3]);
  const [activeItem, setActiveItem] = createSignal(null);
  const ids = () => items();

  // @ts-ignore
  const onDragStart = ({ draggable }) => setActiveItem(draggable.id);

  // @ts-ignore
  const onDragEnd = ({ draggable, droppable }) => {
    if (draggable && droppable) {
      const currentItems = ids();
      const fromIndex = currentItems.indexOf(draggable.id);
      const toIndex = currentItems.indexOf(droppable.id);
      if (fromIndex !== toIndex) {
        const updatedItems = currentItems.slice();
        updatedItems.splice(toIndex, 0, ...updatedItems.splice(fromIndex, 1));
        setItems(updatedItems);
      }
    }
  };

  return (
    <DragDropProvider
      onDragStart={onDragStart}
      // @ts-ignore
      onDragEnd={onDragEnd}
      collisionDetector={closestCenter}
    >
      <DragDropSensors />
      <div class="column self-stretch space-y-2 p-4">
        <SortableProvider ids={ids()}>
          <For each={items()}>{(item) => <Sortable item={item} />}</For>
        </SortableProvider>
      </div>
      <DragOverlay>
        <div class="sortable">{activeItem()}</div>
      </DragOverlay>
    </DragDropProvider>
  );
};

export default () => {
  return (
    <div>
      <SortableVerticalListExample />
      <hr />
      <SortableVerticalListExample />
    </div>
  );
};

thisbeyond / solid-dnd

Only the text is visible on the dragged element #95