Custom shortcode block

Hello!

I have a question about creating my own blocks in the plugin Gutenberg.

I honestly tried to get into the documentation (https://wordpress.org/gutenberg/handbook/), try all the examples, but I did not succeed. Problems arose with React (I’m not particularly familiar with it), and also that some useful examples were written on ESNext (the same situation).

What do I want to do?

I need to create my own block, which will be displayed as shortcode block. It will work as well, but the text field will remain unchanged.
And this new block should have options in the sidebar on the right, here: http://joxi.ru/eAOdvYlTxnW76r
Options allow you to specify shortcode attributes. That is, if you change them, text shortcode inside the block will change too.

How far have I gone?

Not really much. However, I managed to get the following code from examples: https://gitlab.com/snippets/1749964
The problem is that it creates some kind of broken block: http://joxi.ru/ZrJMvYNu9ZPbMA
The block is’t edited for some reason. I guess I’m creating components incorrectly.

Also, it’s not at all clear for me to how can I add my options, which when modified will change the text of the shortcode inside the text box.

Explain to me, please, how realize new block on the basis of shortcode block, but text field won’t be editable and this block had its options in the sidebar.