How to use the @wordpress/element.cloneElement function in @wordpress/element

render() {
		const { children, position, text, shortcut } = this.props;
		if ( Children.count( children ) !== 1 ) {
			if ( 'development' === process.env.NODE_ENV ) {
				// eslint-disable-next-line no-console
				console.error( 'Tooltip should be called with only a single child element.' );
			}

			return children;
		}

		const child = Children.only( children );
		const { isOver } = this.state;
		return cloneElement( child, {
			onMouseEnter: this.createToggleIsOver( 'onMouseEnter', true ),
			onMouseLeave: this.createToggleIsOver( 'onMouseLeave' ),
			onClick: this.createToggleIsOver( 'onClick' ),
			onFocus: this.createToggleIsOver( 'onFocus' ),
			onBlur: this.createToggleIsOver( 'onBlur' ),
			children: concatChildren(
				child.props.children,
				isOver && (
					
						{ text }

}
				}

				// If there are not any deprecated props, return the unmodified element.
				if ( 0 === Object.keys( deprecatedProps ).length ) {
					return element;
				}

				// Once we know the block will be updated successfully, we can now modify the block's attributes.
				if ( 'core/gallery' === name ) {
					settings.attributes.ampCarousel.default = ! select( 'amp/block-editor' ).hasThemeSupport(); // @todo We could just default this to false now even in Reader mode since block styles are loaded.
				}

				// Re-render the block with deprecated props.
				const props = { ...element.props, ...deprecatedProps };
				element = cloneElement( element, props );

				// Gutenberg will now compare the difference and update the block accordingly without the deprecated props.
				return element;
			},
		};

children = (
			<span>
				{ children }
				<span>
					{ info }
				</span>
			</span>
		);
	}

	let tagName = Button;

	if ( icon ) {
		if ( ! isString( icon ) ) {
			icon = cloneElement( icon, {
				className: 'components-menu-items__item-icon',
				height: 20,
				width: 20,
			} );
		}

		tagName = IconButton;
		props.icon = icon;
	}

	return createElement(
		tagName,
		{
			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
			'aria-checked': ( role === 'menuitemcheckbox' || role === 'menuitemradio' ) ? isSelected : undefined,
			role,

const children = Children.toArray( this.props.children ).map( child => {
			return cloneElement( child, { screens: this.props.screens, screen: this.state.screen } )
		} )

/**
		 * Filters the props applied to the block save result element.
		 *
		 * @param {Object}      props      Props applied to save element.
		 * @param {WPBlockType} blockType  Block type definition.
		 * @param {Object}      attributes Block attributes.
		 */
		const props = applyFilters(
			'blocks.getSaveContent.extraProps',
			{ ...element.props },
			blockType,
			attributes
		);

		if ( ! isShallowEqual( props, element.props ) ) {
			element = cloneElement( element, props );
		}
	}

	/**
	 * Filters the save result of a block during serialization.
	 *
	 * @param {WPElement}   element    Block save result.
	 * @param {WPBlockType} blockType  Block type definition.
	 * @param {Object}      attributes Block attributes.
	 */
	element = applyFilters( 'blocks.getSaveElement', element, blockType, attributes );

	return (
		
			{ element }

const newChildren = Children.map( children, ( child ) => {
		return child ? cloneElement( child, { colorScheme: props.preferredColorScheme, isPressed } ) : child;
	} );

Children.map( children, ( child ) => {
						let colorStyle = {};
						if ( color ) {
							colorStyle = { [ property ]: colorValue };
						} else if ( customColor ) {
							colorStyle = { [ property ]: customColor };
						}

						return cloneElement( child, {
							className: classnames( componentClassName, child.props.className, {
								[ `has-${ kebabCase( color ) }-${ kebabCase( property ) }` ]: color,
								[ className || `has-${ kebabCase( name ) }` ]: color || customColor,
							} ),
							style: {
								...colorStyle,
								...componentStyle,
								...( child.props.style || {} ),
							},
						} );
					} ),
				{ maxSize: colorConfigs.length }