Attributes array not saving values

The best way to achieve what i was wanting to do was to use the core blocks for latest post. Then style as I needed to. Here is what my code looks like.

import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";
import {
    useBlockProps, 
    InnerBlocks, 
} from "@wordpress/block-editor";

registerBlockType('sfs-test-header-para-block/sfs-test-header-para-container-block', {
    title: __( 'This is my test block', 'sfs-block' ),
    category: 'design',
    edit( { className} ) {
        const blockProps = useBlockProps();
        const TEMPLATE = [ [ 'core/cover', { className: 'sfs-header-cover',}, [
            [ 'core/columns', {className: 'sfs-h2-header-cols', backgroundColor: 'transparent', verticalAlignment: 'center' }, [
               [ 'core/column', {className: 'sfs-h2-header-img-col', templateLock: 'insert' }, [
                   [ 'core/latest-posts' ],
               ] ],
           ] ] ] ]];
        return(
            <div { ...blockProps }
            className={ className }>
                <InnerBlocks
                    template={ TEMPLATE }
                    templateLock="insert"
                />
            </div>
        )
    },

    save() {
        const blockProps = useBlockProps.save();
        return(
            <div { ...blockProps }>
                <InnerBlocks.Content />
            </div>
        )
    },
});

I would avoid what I was tying to do with apiFetch and list of attributes. It’s a rabbit hole you want to avoid. Big Thanks to @TomJNowell for setting me straight.

error code: 523