CKEditor 5 keep custom html elements (upcast/downcast)

I followed ckeditor 5 tutorial on creating block widget

Everything works fine and i am able to create a widget with parent container, containing an h1 and div elements with custom text etc.

My current model in the editor console:

With view:

This works great (using the exact implementation described in the link). However, what i am trying to achieve is that when fetching html from ckeditor instead of the parent div.doppio-block i get a custom element <doppio-block>. So something like this:

    <doppio-block>
<h1 class='doppio-block-class'></h1>
<div class='doppio-block-body'></div>
</doppio-block>

I tried changing the parent container conversion in editing.js (by making sure doppio-block element is created instead of a div)

conversion.for('upcast').elementToElement({
    model: 'doppio-block',
    view: {
        name: 'doppio-block',
        classes: 'doppio-block'
    }
});

// DATA downcast: HTML5 to MODEL
conversion.for('dataDowncast').elementToElement({
    view: {
        name: 'doppio-block',
        classes: 'doppio-block'
    },
    model: 'doppio-block',
});

conversion.for('editingDowncast').elementToElement({
    model: 'doppio-block',
    view: (modelElement, { writer: viewWriter }) => {

        const section = viewWriter.createContainerElement('doppio-block', { class: 'doppio-block' });
        return toWidget(section, viewWriter, { label: 'doppio block' });
    }
});

This works when initially creating the widget, but the rendering is messed up when pre-loading the ckeditor, which renders model:

And view:

I think my issue is somewhere with upcasting or downcasting, but cannot figure it out.