How to use the @wordpress/blocks.cloneBlock function in @wordpress/blocks

//
// children
// ----------------------------------------------------------------------------

// $ExpectType ReactChild[]
blocks.children.fromDOM(document.querySelectorAll('div'));

// $ExpectType (domNode: Node & ParentNode) => ReactChild[]
blocks.children.matcher('.foo');

//
// factory
// ----------------------------------------------------------------------------

// $ExpectType BlockInstance<{ foo: string; }>
blocks.cloneBlock(BLOCK_INSTANCE);

// $ExpectType BlockInstance<{ foo: string; }>
blocks.createBlock('my/foo', { foo: 'bar' });

blocks.findTransform(
    [
        {
            type: 'block',
            blocks: [],
            priority: 1,
            transform(atts) {
                return blocks.createBlock('my/foo');
            },
        },
    ],
    transform => transform.type === 'block'

const addTemplate = () => {
	const { getSelectedBlockClientId, getBlock } = select( 'core/block-editor' );
	const {
		__experimentalReceiveReusableBlocks: receiveReusableBlocks,
		__experimentalSaveReusableBlock: saveReusableBlock,
	} = dispatch( 'core/editor' );

	// @todo Allow multi-page templates.
	const parsedBlock = getBlock( getSelectedBlockClientId() );
	if ( 'amp/amp-story-page' !== parsedBlock.name ) {
		return;
	}

	// Clone for having a different ID.
	const templateBlock = cloneBlock( parsedBlock );

	// @todo Allow choosing name for the template.
	const reusableBlock = {
		id: uniqueId( 'reusable' ),
		clientId: templateBlock.clientId,
		title: __( 'Template', 'amp' ),
	};

	receiveReusableBlocks( [ {
		reusableBlock,
		parsedBlock: templateBlock,
	} ] );

	// @todo Display notice.
	saveReusableBlock( reusableBlock.id );
};

const blockB = getBlock( state, clientIdB );
		const blockBType = getBlockType( blockB.name );
		const { clientId, attributeKey, offset } = getSelectionStart( state );
		const hasTextSelection = (
			( clientId === clientIdA || clientId === clientIdB ) &&
			attributeKey !== undefined &&
			offset !== undefined
		);

		// A robust way to retain selection position through various transforms
		// is to insert a special character at the position and then recover it.
		const START_OF_SELECTED_AREA = '\u0086';

		// Clone the blocks so we don't insert the character in a "live" block.
		const cloneA = cloneBlock( blockA );
		const cloneB = cloneBlock( blockB );

		if ( hasTextSelection ) {
			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
			const html = selectedBlock.attributes[ attributeKey ];
			const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
			const multilineTag = selectedBlockType.attributes[ attributeKey ].multiline;
			const value = insert( create( {
				html,
				multilineTag,
			} ), START_OF_SELECTED_AREA, offset, offset );

			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
				value,
				multilineTag,
			} );

const blockB = getBlock( state, clientIdB );
		const blockBType = getBlockType( blockB.name );
		const { clientId, attributeKey, offset } = getSelectionStart( state );
		const hasTextSelection = (
			( clientId === clientIdA || clientId === clientIdB ) &&
			attributeKey !== undefined &&
			offset !== undefined
		);

		// A robust way to retain selection position through various transforms
		// is to insert a special character at the position and then recover it.
		const START_OF_SELECTED_AREA = '\u0086';

		// Clone the blocks so we don't insert the character in a "live" block.
		const cloneA = cloneBlock( blockA );
		const cloneB = cloneBlock( blockB );

		if ( hasTextSelection ) {
			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
			const html = selectedBlock.attributes[ attributeKey ];
			const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
			const multilineTag = selectedBlockType.attributes[ attributeKey ].multiline;
			const value = insert( create( {
				html,
				multilineTag,
			} ), START_OF_SELECTED_AREA, offset, offset );

			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
				value,
				multilineTag,
			} );
		}

				const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
				insertBlocks(

}
							
						}
						{ ( hoveredClassName !== null ) &&
							<div>
								<div>{ __( 'Preview' ) }</div>
								
							</div>
						}
					
				) }
			/&gt;

return;
		}

		let parentBlock;
		let index;

		if ( isPageBlock( clientId ) ) {
			parentBlock = '';
			const currentPageIndex = pageList.indexOf( clientId );
			index = currentPageIndex + 1;
		} else {
			parentBlock = getBlockRootClientId( clientId );
			index = null;
		}

		const clonedBlock = cloneBlock( block );
		insertBlock( clonedBlock, index, parentBlock );
	};

blocks = castArray( blocks ).map( ( block ) => (
						cloneBlock( block, { layout } )
					) );
				}

				const innerBlocks = blocksSelection.map( block => cloneBlock( block ) )
				const containerBlock = createBlock( 'ugb/container', {}, innerBlocks )

      blocks = blocks.map(block => cloneBlock(block, { layout }));
      insertBlocks(blocks, index, rootClientId);