Modify core/picture block by including interior span to figcaption in save

I would have to barely modify the construction of the core/picture figcaption element within the filtered save perform by including a span wrapper to the contents of the caption (I would like one other markup component for my frontend plans). I’ve labored rather a lot with the editor and executed a whole lot of {custom} blocks, however I’ve struggled on precisely this activity a few occasions. I imagine it is some false impression of mine with React (as all the time). Every little thing works and I can console.log all values in any respect levels efficiently till the very second when I attempt to re-inject my new JSX into props.kids. As quickly as I uncomment this line I get a clean display screen and React tells me Kind error: kids.props is undefined.

That is my code for the filtered save perform of the prolonged core/picture block:

perform customImageSave( component, blockType, attributes ) {

if ( ! restrictToBlocks.contains( blockType.title ) ) {
    return component;
}
// Customized boolean attribute added to core picture block
const { addSpan } = attributes;

const { kids } = component.props;
// array with img and figcaption parts (perhaps good thought to unfold in new array?)
const innerElems = [ ...children.props.children ];
// picture
const theImage = innerElems[0];
// figcaption
const theCaption = innerElems[1];
// provided that figcaption is used in any respect (in any other case 'false')
if ( theCaption ) {
    // get string worth of figcaption content material
    let theValue = theCaption.props.worth;
    let theJSX;
    // provided that span must be added
    if ( addSpan ) {
        // verify if figcaption is already wrapped in <span></span>
        if ( ! theValue.contains( '<span>' ) ) {
            // in any other case assemble new JSX
            theJSX = <figcaption><span>{theValue}</span></figcaption>;
        }
    } else {
        // if no span must be added however figcaption already contains <span> wrapper, take away it
        if ( theValue.contains( '<span>' ) ) {
            theValue.change( '<span>', '' );
            theValue.change( '</span>', '' );
            // rebuild 'authentic' JSX with out <span>
            theJSX = <figcaption>{theValue}</figcaption>;
        }
    }
    // new Array with unchanged img component and new figcaption component
    const newChildren = [ theImage, theJSX ];
    // attempt to inject it (fails)
    component.props.kids.props.kids = newChildren;
    return component;
}

return component;
}
addFilter( 'blocks.getSaveElement', 'vortac/custom-image-save', customImageSave );

Any assist / advise actually appreciated. Would it not be higher to publish the entire code of the block (to check it?)