Set custom dataTransfer with react-dnd

I am using the react-dnd library to handle drag and drop in React (with the multi back-end to have support for both desktop and mobile platforms) . I’m also using the Ace editor in my app.

The Ace editor accepts dragging and dropping text into the editor as long as the dataTransfer object of the event has {Text: thetexttopaste}.

I would like to generate this dataTransfer for the draggable items that I already handle with react-dnd. However, I can’t find a way to set this dataTransfer data, nor to access the native event.

Here’s the code where I declare my react-dnd draggable items:

export function AvailableBlock(props: AvailableBlockProps) {
    const {block} = props;

    const [collected, drag, dragPreview] = useDrag(() => ({
        type: 'available-block',
        item: {type: 'Text'}
    }))

    return (
        <div className="task-available-block" ref={drag}>
            <div className="task-available-block-name">
                {block.caption}
            </div>
        </div>
    );
}

Is there a way to do it?