Draggable item in custom gutenberg block

I’m developing some custom blocks in the new Gutenberg editor experience, and I’m struggle to understand how to use some build-in components, mostly the Draggable components.

What I would like to achieve is a list of items (let’s say many li in a ul) and I want them to be orderable with a drag & drop feature.

Here is my code:

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import { Draggable, Dashicon } from '@wordpress/components';

import './style.scss';
import './editor.scss';

registerBlockType( 'namespace/my-custom-block', 
{
    title: __( 'Custom block', 'namespace'),
    description: __( 'Description of the custom block', 'namespace' ),
    category: 'common',
    icon: 'clipboard',
    keywords: [
    __( 'list', 'namespace' ),
    __( 'item', 'namespace' ),
    __( 'order', 'namespace' )
    ],
    supports: {
    html: false,
    multiple: false,
    },
    attributes: {
        items: {
            type: 'array',
            default: [ 'One' ,'Two' ,'Tree' ,'Four' ,'Five' ,'Six' ,'Seven' ,'Eight' ,'Nine' ,'Ten' ]
        }
    },
    edit: props => {
    return (
        <ul>
        { props.attributes.items.map( (itemLabel, id) => (
            <li id={ `li_${id}` } draggable>
            <Draggable
                elementId={ `li_${id}` }
                transferData={ {} }>
                {
                ({ onDraggableStart, onDraggableEnd }) => (
                    <Dashicon
                    icon="move"
                    onDragStart={ onDraggableStart }
                    onDragEnd={ onDraggableEnd }
                    draggable
                    />
                )
                }
            </Draggable>
            { itemLabel }
            </li>
        ))
        }
        </ul>
    )
    },
    save: () => {
    // Return null to be rendered on the server
    return null;
    }
}
)

On the backend side it is correctly rendered but the items are not draggable

Unfortunately the gutenberg developer handbook doesn’t give much info
https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/draggable/ and I’m not seeing how should I do it.

Thanks and cheers

Use react-sortable-hoc
Draggable is lacking documentation and I did not had the time to dig into it.
But the above is for you.
I used it to create the sidebar Entry Content/Primary Sidebar control – used to reorder my theme content/sidebar!