Wordpress Gutenberg : Add custom Gutenberg block inside our own custom block

Question

I've created a gutenberg call-to-action block that just allows you to add a button. This button can have a style (primary or secondary) and contains a link. This block works perfectly well. No problem at all. Here is the contents of the block.json :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "deefuse/call-to-action",
    "version": "0.1.0",
    "title": "Bouton d'action",
    "category": "design",
    "icon": "button",
    "description": "Insérez un bouton d'action.",
    "attributes": {
        "linkBtn" : {
            "type": "object",
            "default": {
                "title": "",
                "url" : "",
                "opensInNewTab" : false
            }
        },
        "type": {
            "enum": [ "primary", "secondary" ],
            "default": "primary"
        }
    },
    "supports": {
        "html": false
    },
    "textdomain": "gutform",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

I've created a second block heading-2 to add an h2 title and text content. On this block, I'd like the user to be able to choose whether or not to add :

• Either a primary button
• or a secondary button
• or both

Here is the contents of the block.json :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "deefuse/heading-2",
    "version": "0.1.0",
    "title": "Heading 2",
    "category": "text",
    "icon": "flag",
    "description": "My Heading 2 block",
    "attributes": {
        "heading_2": {
            "type": "string",
            "source": "html",
            "selector": "h2"
        },
        "content": {
            "type": "string",
            "source": "html",
            "selector": ".content"
        },
        "showPrimaryButton" : {
            "type": "boolean",
            "default": false
        },
        "showSecondaryButton" : {
            "type": "boolean",
            "default": false
        }
    },
    "supports": {
        "html": false
    },
    "textdomain": "gutform",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css"
}

I can't find a way to insert my first "call-to-action" block into the second in the Edit function.

I'd like to be able to re-use the block in this way:

export default function Heading2Block(props) {
    const {isSelected, setAttributes, heading_2, content, showPrimaryButton, showSecondaryButton} = props
    const blockProps = useBlockProps();
    


    return (
        <div {...blockProps}>
            <div className="heading-separator"></div>
            <RichText
                tagName="h2"
                placeholder="Titre du bloc"
                value={heading_2}
                allowedFormats={[]}
                onChange={(val) => setAttributes({heading_2: val})}
                required
            />
            {(isSelected || content) && (
                <RichText
                    tagName="div"
                    placeholder="Contenu textuel du bloc heading 2"
                    value={content}
                    className="content"
                    onChange={(val) => setAttributes({content: val})}
                />
            )}
            {(showPrimaryButton || showSecondaryButton) && (
                <div className="cta-wrapper">
                    {showSecondaryButton && (
                        <MyOwnBlockAsComponent type="primary"/>
                    )}
                    {showSecondaryButton && (
                        <MyOwnBlockAsComponent type="secondary"/>
                    )}
                </div>
            )}
        </div>
    )
}

I've tried using InnerBlocks but that doesn't seem to be the solution.

Heading2 block