Iam trying to create a custom block to use in the gutenberg editor.
I have a rudimentary setup which kinda works.

But inside the Gutenberg editor my custom block seems to be missing some classes.

This results in the following:

The wrapper div of my block has just the classes:

block-editor-block-list__block

For example, the classes of a paragraph block:

block-editor-rich-text__editable block-editor-block-list__block wp-block rich-text

Or the default blockquote block:

wp-block-quote block-editor-block-list__block wp-block

With the class wp-block missing on my custom block, the block is always displayed as full-width,
without margins in the editor.
(nothing to do with the alignment option)

I tried to add className: props.className to the elements, but this doesnt add the missing classes to the wrapper of the block.

...
//Display block preview and UI
    return createElement('div', {
        className: props.className, // here
    }, [
    //Preview a block with a PHP render callback
    createElement( ServerSideRender, {
        block: 'my-custom-block/my-block',
        attributes: attributes,
        className: props.className, // here
    } ),
    // Block inspector
        createElement( InspectorControls, {}, [
            // Create a panel
            createElement(PanelBody, {
                ... just panel settings
            ])// END PanelBody
        ])// END Block inspector
    ])
...

props.className returns wp-block-my-custom-block-my-block.

Here is a screenshot of the block inside the editor, and also the classes.
You can see the classes and the full-width problem:
https://imgur.com/a/KbVhWsh

And here is a screenshot of a normal block:
https://imgur.com/iDvTUI9

And here is a screenshot of the full block HTML in the editor:
https://imgur.com/1FrXtXE

Iam new to creating blocks, I dont found any infos on what Iam doing wrong here.
Also Iam not familiar with ESNext code.