How to use the @wordpress/element.Children.map function in @wordpress/element

const fills = map( getFills( name, this ), ( fill ) => {
			const fillKey = fill.occurrence;
			const fillChildren = isFunction( fill.children ) ? fill.children( fillProps ) : fill.children;

			return Children.map( fillChildren, ( child, childIndex ) => {
				if ( ! child || isString( child ) ) {
					return child;
				}

				const childKey = `${ fillKey }---${ child.key || childIndex }`;
				return cloneElement( child, { key: childKey } );
			} );
		} ).filter(
			// In some cases fills are rendered only when some conditions apply.

( name, property, className, color, colorValue, customColor ) => ( {
					children,
					className: componentClassName = '',
					style: componentStyle = {},
				} ) =>
					// Clone children, setting the style property from the color configuration,
					// if not already set explicitly through props.
					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 || {} ),

render() {
		const { children, className } = this.props;
		const { imageHeight } = this.state;
		const classNames = classnames( className, 'swiper-container' );
		return (
			<div>
				<div>
					{ Children.map( children, child =&gt; {
						if ( ! child.props.children ) {
							return null;
						}
						const image = this.getChildByDataAttribute( child, 'data-is-image' );
						if ( ! image ) {
							return null;
						}
						const { src, alt } = image.props;
						const figcaption = this.getChildByDataAttribute( child, 'data-is-caption' );
						const caption = figcaption ? figcaption.props.children : null;
						const style = {
							backgroundImage: `url(${ src })`,
							height: imageHeight,
						};
						return (
							<div></div></div></div>

),
		[ showRequiredNotice, requiredNotice ]
	);
	return (
		<div id="{">
			<div>
				{ formErrors }
				{ formInfo }
				{
					Children.map( children, ( child, index ) =&gt; {
						return (
							
						);
					} )
				}
				{ requiredFields }
			</div>
		</div>
	);
};

children,
	} = props;

	const newClassName = classnames(
		'wp-tiles',
		className,
		{
			[ `align${ align }` ]: align,
			[ `columns-${ columns }` ]: columns,
			'is-cropped': imageCrop,
		}
	);

	return (
		<ul>
			{ Children.map( children, ( child ) =&gt; {
				return (
					<li>
						{ child }
					</li>
				);
			}	) }
		</ul>
	);
}

function Tiles( props ) {
	const {
		columns,
		children,
		spacing = 10,
		style,
	} = props;

	const { compose } = StyleSheet;

	const tileCount = Children.count( children );
	const lastTile = tileCount - 1;
	const lastRow = Math.floor( lastTile / columns );

	const wrappedChildren = Children.map( children, ( child, index ) => {
		/** Since we don't have `calc()`, we must calculate our spacings here in
		 * order to preserve even spacing between tiles and equal width for tiles
		 * in a given row.
		 *
		 * In order to ensure equal sizing of tile contents, we distribute the
		 * spacing such that each tile has an equal "share" of the fixed spacing. To
		 * keep the tiles properly aligned within their rows, we calculate the left
		 * and right paddings based on the tile's relative position within the row.
		 *
		 * Note: we use padding instead of margins so that the fixed spacing is
		 * included within the relative spacing (i.e. width percentage), and
		 * wrapping behavior is preserved.
		 *
		 *  - The left most tile in a row must have left padding of zero.
		 *  - The right most tile in a row must have a right padding of zero.
		 *

injectContextIntoChildren( cssPath, children ) {
		const siblingCount = Children.count( children );
		return Children.map( children, ( child, siblingPosition ) => {
			return cloneElement( child, { siblingCount, siblingPosition, ancestorPath: cssPath } );
		} );
	}

getChildByDataAttribute = ( parent, attributeName ) => {
		const matches = Children.map( parent.props.children, child => {
			if ( child && child.props[ attributeName ] ) {
				return child;
			}
		} );
		return matches && matches.length ? matches[ 0 ] : null;
	};
	sizeSlideshow = () => {

render() {
		const { points, admin, children, markerColor } = this.props;
		const { map, activeMarker, mapboxgl } = this.state;
		const { onMarkerClick, deleteActiveMarker, updateActiveMarker } = this;
		const currentPoint = get( activeMarker, 'props.point' ) || {};
		const { title, caption } = currentPoint;
		const addPoint = Children.map( children, child => {
			const tagName = get( child, 'props.tagName' );
			if ( 'AddPoint' === tagName ) {
				return child;
			}
		} );
		const mapMarkers =
			map &&
			mapboxgl &&
			points.map( ( point, index ) => {
				return (

render() {
		const { points, admin, children, markerColor } = this.props;
		const { map, activeMarker, mapboxgl } = this.state;
		const { onMarkerClick, deleteActiveMarker, updateActiveMarker } = this;
		const currentPoint = get( activeMarker, 'props.point' ) || {};
		const { title, caption } = currentPoint;
		const addPoint = Children.map( children, child => {
			const tagName = get( child, 'props.tagName' );
			if ( 'AddPoint' === tagName ) {
				return child;
			}
		} );
		const mapMarkers =
			map &&
			mapboxgl &&
			points.map( ( point, index ) => {
				return (