Auto wrap every component drag into canvas with another component

I am trying to make sure every component drag into the canvas to be wrapped with a column component. To achieve that I use canvas event.

First I disabled window event to prevent default html 5 drag and drop event to be fired. canvas:drop event

ditor.on('canvas:drop', function (dataTransfer) {
    event.preventDefault()
})

Let's say that my column component is so simple, only a single div.

canvas:dragdata event

editor.on('canvas:dragdata', handleDragData)

function handleDragData (dataTransfer, result) {
    if (!event.currentTarget.closest('.column')) {
        result.content `
            <div class="column" data-gjs-type="column">
                <div class="column-inner">
                    ${dataTransfer.getData(dataTransfer.types[0])}
                </div>
            </div>
        `
}

Above code return error, saying that dataTransfer not defined

What I understand is we can customize what we drop to the canvas with result.content

something like

//...

result.content = { type: 'heading' }

or

//...

result.content = `<div>I will replace the default dragged component</div>`

What I don't understand is how to wrap the dragged component with element/component.