WordPress InnerBlocks Gutenberg don't save correct

Question

I have a very simple InnerBlock. When I'm opening a page I can create a nest the blocks without any issue. I can save and view the page everything is correct. However when I'm trying to edit the page again I get the Block validation failed error:

Content generated by `save` function:

<div class="container my-4 my-md-5" class="wp-block-wpptheme-faq-section"><div class="row"><div class="col-12"><div class="accordion" id="faq"><div></div></div></div></div></div>

Content retrieved from post body:

<div class="container my-4 my-md-5" class="wp-block-wpptheme-faq-section"><div class="row"><div class="col-12"><div class="accordion" id="faq"><div>

Why is the block not saving correctly?

const ALLOWED_BLOCKS = ['wpptheme/faq-block'];

registerBlockType('wpptheme/faq-section', {
    //built-in attributes
    title: 'FAQ Abschnitt',
    icon: 'star-filled',
    category: 'wpptheme',

    edit() {
        return ([
            <div class="wpptheme-custom">
                <h3>Häufig gestelle Fragen</h3>
                <div>
                    <InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
                </div>
            </div>
        ]);
    },
    save() {

        return (
            <div class="container my-4 my-md-5">
                <div class="row">
                    <div class="col-12">
                        <div class="accordion" id="faq">
                            <div>
                                <InnerBlocks.Content />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});


registerBlockType('wpptheme/faq-block', {
    //built-in attributes
    title: 'FAQ Block',
    icon: 'star-filled',
    parent: [ 'wpptheme/faq-section' ],
    category: 'wpptheme',

    edit() {
        return ([
            <div class="wpptheme-custom">
                <h4>Block</h4>
            </div>
        ]);
    },
    save() {
        return (
            <h3>Test</h3>
        );
    }
});

Answer 1

The issue how the classes are being applied in save() of wpptheme/faq-section. CSS classes in React should be passed in with "className" property, unlike vanilla HTML.

Updated save() for wpptheme/faq-section:

...
    save() {

        return (
            <div className="container my-4 my-md-5">
                <div className="row">
                    <div className="col-12">
                        <div className="accordion" id="faq">
                            <div>
                                <InnerBlocks.Content />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    );
}
...