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>             </>     ); }