Currently I'm creating a list of components for a InnerBlock

blockItems = tabItems.map(function(item, index) {
    return ['test/tab', {borderRadius: borderRadius, blockParentID: clientId, blockParentIndex: index, bodyBgColor: bodyBgColor, bodyTextColor: bodyTextColor, borderColor: borderColor, title: item.header }];
});

I'm seeing that when i create the blocks and save they work perfectly. When i go back to edit I get block validation error.

This is due to the fact that i use the blockParentId and blockParentIndex to build a unique key for the tab

let blockWrapperId = 'test-tab-' + content.blockParentID + '-' + content.blockParentIndex;
return(
    <div>
        {props.attributes.title}
        <div className="test-tab-body" id={blockWrapperId} style={styling} >
            <InnerBlocks templateLock={tl} template={blockItems} />
        </div>
    </div>
);

however validation fails as shown:

Content generated by `save` function:

<div class="wp-block-test-tab test-tab-body" id="test-tab-085831f4-9286-4da9-97a3-3d9e4353a89d-undefined" style="border-color:#E0BB3B;border-radius:2px"></div>

Content retrieved from post body:

<div class="wp-block-test-tab test-tab-body" id="test-tab-085831f4-9286-4da9-97a3-3d9e4353a89d-1" style="border-color:#E0BB3B;border-radius:2px"></div>

As you can see the blockParentIndex is loading as undefined. Any thoughts to how i can have the loaded blocks keep their index?