plugin development – Rerender core Templates with with ToggleControl but it doesnt recognize block type

Hey Guys I want to change my const TEMPLATE = (template) dynamically with the <InnerBlocks template={TEMPLATE} /> component. Based on a toggle I want to remove my ‘core/image’ block. I tried to create this with state and I set the state of my template and columns when I toggle them. Gutenberg gives a blocktype ‘r’ not recognized error.

My index.js file of the block can be found in here

const { __ } = wp.i18n;
import './styles/editor.scss'
import './styles/style.scss'
import edit from './edit';
import save from './save';

/**
 * Register block
 */

export const name = 'toolbox/three-cta';

export const settings = {
    title: __("Three CTA Block"),
    description: __("Display CTA block"),
    category: "widget",
    icon: "awards",
    attributes: {
        paragraph: {
            type: 'string',
            default: '',
            source: 'html',
            selector: 'p'
        },
        heading: {
            type: 'string',
            source: 'html',
            selector: 'h2'
        },
        cards: {
            type: 'number',
            default: 0,
        },
        toggleImg: {
            type: 'boolean',
            default: false,
        }
    },
    edit,
    save,
}

And in edit.js these attributes gets changed. I think it has something to do with the core blocks I might be setting. But I didnt change the names of these core blocks, so I dont understand why Gutenberg doesnt recognize it.

import { InnerBlocks, InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { PanelBody, PanelRow, RangeControl, ToggleControl } from "@wordpress/components";
import { useDispatch, useSelect } from "@wordpress/data";
import { createBlock } from "@wordpress/blocks";
import { useState } from "@wordpress/element";
const { times } = lodash;


// const TEMPLATE = (
// The template that should be reproduced. Based on the toggle  ( "core/image", {} ), should be removed
//  ( 'core/heading', { placeholder: 'Three CTA Block' } ),
//  ( 'core/columns', {}, (
//      ( 'core/column', {}, (
//          ( "core/image", {} ),
//          ( "core/heading", { placeholder: __( "Toolbox CTA" ) } ),
//          ( "core/paragraph", { placeholder: "CTA Description" } ),
//          ( "core/button", { placeholder: "Call to Action" } ),
//      )
//      ),
//      ( 'core/column', {}, (
//          ( "core/image", {} ),
//          ( "core/heading", { placeholder: __( "Toolbox CTA" ) } ),
//          ( "core/paragraph", { placeholder: "CTA Description" } ),
//          ( "core/button", { placeholder: "Call to Action" } ),
//      )
//      ),
//      ( 'core/column', {}, (
//          ( "core/image", {} ),
//          ( "core/heading", { placeholder: __( "Toolbox CTA" ) } ),
//          ( "core/paragraph", { placeholder: "CTA Description" } ),
//          ( "core/button", { placeholder: "Call to Action" } )
//      )
//      ),
//  )
//  ) );

export default function edit( props ) {
    const { className, attributes, setAttributes, clientId } = props;

    // code for the rangeControl Innerblocks doesnt affect the code (if not clicked on the rangeControls)
    const { replaceInnerBlocks } = useDispatch( "core/block-editor" );
    let { inner_blocks } = useSelect( select => ( {
        inner_blocks: select( "core/block-editor" ).getBlocks( clientId )
    } ) );

    let (column, setColumn) = useState(( 'core/column', {}, (
        ( "core/heading", { placeholder: __( "PLACEHOLDER" ) } ),
        ( "core/paragraph", { placeholder: "CTA P" } ),
        ( "core/button", { placeholder: "CTA Button" } ),
    )))


    const (template, setTemplate) = useState((
        ("core/heading", { placeholder: "Three CTA Block" }),
        ("core/columns", {}, (...column)),
    ))



    const toggleChange = (value) => {
        setAttributes({ toggleImg: value })
        // const newColumn = column += ('core/column', {}, (("core/image", {}),));
        const newColumn = ( 'core/column', {}, (
            ( "core/image", {} ),
            ( "core/heading", { placeholder: __( "Toolbox CTA" ) } ),
            ( "core/paragraph", { placeholder: "CTA Description" } ),
            ( "core/button", { placeholder: "Call to Action" } ),
        ))

        setColumn(newColumn);
        setTemplate((
            ("core/heading", { placeholder: "Three CTA Block" }),
            ("core/columns", {}, (...newColumn)),
        ))

    }

    const getInspector = () => {
        return (
                <InspectorControls>
                    <PanelBody
                            title="Add columns"
                            initalOpen={true}
                    >
                        <PanelRow>
                            <RangeControl
                                    label="columns"
                                    value={attributes.cards}
                                    min={0}
                                    max={3}
                                    onChange={count => {
                                        let new_innerblocks = inner_blocks
                                        if ( attributes.cards < count ) {
                                            new_innerblocks = (
                                                ...inner_blocks,
                                                ...times( count - attributes.cards, () =>
                                                        createBlock( "toolbox/three-cta" )
                                                )
                                            );
                                        } else if ( attributes.cards > count ) {
                                            inner_blocks = inner_blocks.slice( 0, count )
                                        }
                                        replaceInnerBlocks( clientId, new_innerblocks, false );
                                    }}
                            />
                        </PanelRow>
                        <PanelRow>
                            <ToggleControl
                                    label="Toggle me"
                                    checked={attributes.toggleImg}
                                    onChange={(value) => toggleChange(value)}
                            />
                        </PanelRow>
                    </PanelBody>
                </InspectorControls>
        )
    }

    return (
            <>
                {getInspector()}
                <div className={className}>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossOrigin="anonymous"/>
                    <div className="grid-x">
                        <div className="cell small-12">
                            <InnerBlocks template={template} templateLock="true"/>
                        </div>
                    </div>
                </div>
            </>
    );
}