Can't get drag and drop working

[wwsalmon]

hi all! I'm trying to implement drag and drop. I took code from the story example, but I can't get the drag icon to show up, and whenever I make a non-paragraph block I get the error "Invariant Violation: Expected drag drop context". Can anyone help, or have a working implementation of drag and drop that I can take a look at? Here a sandbox with my code: https://codesandbox.io/s/zealous-yalow-i4kk5?file=/src/App.tsx

Relevant code:

const components = createSlatePluginsComponents();

Object.keys(components).forEach((key) => {
    if (
        [
            ELEMENT_PARAGRAPH,
            ELEMENT_BLOCKQUOTE,
            ELEMENT_TODO_LI,
            ELEMENT_H1,
            ELEMENT_H2,
            ELEMENT_H3,
            ELEMENT_H4,
            ELEMENT_H5,
            ELEMENT_H6,
            ELEMENT_IMAGE,
            ELEMENT_LINK,
            ELEMENT_OL,
            ELEMENT_UL,
            ELEMENT_TABLE,
            ELEMENT_MEDIA_EMBED,
            ELEMENT_CODE_BLOCK,
        ].includes(key)
    ) {
        const rootKeys = [ELEMENT_PARAGRAPH, ELEMENT_UL, ELEMENT_OL];

        components[key] = getSelectableElement({
            component: components[key],
            level: rootKeys.includes(key) ? 0 : undefined,
            dragIcon: (
                <span>drag</span>
            ),
            styles: {
                blockAndGutter: {
                    padding: '4px 0',
                },
                blockToolbarWrapper: {
                    height: '1.5em',
                },
            },
        });
    }
});

...

export default function SlateDemo() {
    return (
        <div className="max-w-4xl mx-auto px-4">
            <h3 className="up-ui-title">Slate</h3>
            <div className="prose content">
                <DndProvider backend={HTML5Backend}>
                    <SlatePlugins
                        id="testId"
                        initialValue={[
                            {
                                type: 'paragraph',
                                children: [{
                                    text: 'A line of text in a paragraph.',
                                    [options[MARK_ITALIC].type]: true,
                                }],
                            },
                        ]}
                        plugins={plugins}
                        components={components}
                        options={options}
                    />
                </DndProvider>
            </div>
        </div>
    );
}

[zbeyens]

This can happen when the local react-dnd version mismatch the plugin one