Error when using the "use:*" directive in solidjs typescript

[g0dzcsgo]

I am trying to use the "use:" directive in SolidJS typescript, but it spits out an error:

Type '{ children: string; "use:draggable": true; class: string; classList: { "opacity-25": boolean; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'use:draggable' does not exist on type 'HTMLAttributes<HTMLDivElement>'. Did you mean 'draggable'?ts(2322)

My code:

const Draggable = () => {
const id = Math.random().toString(36).substr(2, 9);
const draggable = createDraggable(id);

return (
    <div
        use:draggable
        class="draggable"
        classList={{ "opacity-25": draggable.isActiveDraggable }}
    >
        Draggable
    </div>
)

}

I am trying to use @thisbeyond/solid-dnd package, but I can't even get it to work due to this error!

[lxsmnsyc]

You need to redefine the Directives interface with your directive.

https://docs.solidjs.com/references/api-reference/special-jsx-attributes/use_

[g0dzcsgo]

Tried this, doesn't work...

I am trying to use solid-dnd-directive

And I am importing it like so:
import { dndzone, TRIGGERS } from "solid-dnd-directive";

            <section
                class="tablet-icons-container"
                // @ts-ignore
                use:dndzone={{ appPositions }}
                on:consider={handleDragAndDropEvent}
                on:finalize
            >
            </section>

If I do ts ignore it will still not work, babel will complain.

Error: Property arguments[1] of CallExpression expected node to be of a type ["Expression","SpreadElement","JSXNamespacedName","ArgumentPlaceholder"] but instead got "JSXEmptyExpression

[atk]

Could you show us what you tried so we can help find the actual issue?