I'm complete fused for try to make a button in a custom nested blocks.

In short, i should making this:

LINK TO GIF FROM GITHUB - PLUS BUTTON INTO BLOCK

The "button plus" inside a custom block for call other blocks of gutenberg.

Obviously I have read the manual and seen several texts (from which I took the image). however the challenge of doing this in plain js (not jsx) is getting complicated.

currently I have thinked this:

const _ = wp.element.createElement
const useblocks = wp.blockEditor.InnerBlocks
const useprops = wp.blockEditor.useBlockProps

    
var MY_TEMPLATE = [
    [ 'core/columns', {} ],
    [ 'core/heading', { placeholder: 'Test Title' } ],
    ....
];

wp.blocks.registerBlockType( 'the-plugin-scheme/hello-scheme-nested', {

    title: "HELLO SCHEME NESTEDS",
    icon: 'carrot',
    category: 'common',
    attributes: {
        content:{
            type: 'array',
        },
    },

    edit: function( props ) {

        var markup =
             _('div', useprops({className: props.className}),

                _( useblocks ,
                    useprops({ template: MY_TEMPLATE, templateLock:'insert' /*renderAppender: ButtonBlockAppender ??*/} ),
                    _( useblocks.ButtonBlockAppender ),
                )

            );

        return markup;

    },

    save: function( props ) {

       ...

    },

});

I am sensing that the problem is in the ButtonBlockAppender... or similar...

How can i add this button and open the gutenberg blocks windows?

Has anyone dealt with this and can you help me?

Thanks