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

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

		// If this is the currently selected screen.
		const isCurrentScreen = this.state.screen === this.props.screen

		// If there is no screen available, then just show the desktop. For
		// example, if only desktop & tablet are assigned to the screens prop,
		// and we're currently showing the mobile screen option, since there's
		// no option available, then just show the desktop screen option.
		const isNoScreen = ! this.props.screens.includes( this.state.screen ) && ! isCurrentScreen && this.props.screen === 'desktop'

		return (
			
				{ ( isCurrentScreen || isNoScreen ) && children }

startPath() {
		const { children } = this.props;
		if ( Children.count( children ) > 0 && Children.toArray( children )[0].props.path ) {
			return Children.toArray( children )[0].props.path;
		}
		return '/';
	}

render() {
		const { className, children, progressBarText, ...otherProps } = this.props;
		const { hideCompleted } = this.state;
		const completedLabel = hideCompleted ? __( 'Show completed' ) : __( 'Hide completed' );
		const completedIcon = hideCompleted ? 'arrow-down-alt2' : 'arrow-up-alt2';
		const classes = murielClassnames(
			'muriel-checklist',
			className,
			hideCompleted && 'is-hide-completed'
		);
		const completedCount = Children.toArray( children ).reduce( ( completedCount, child ) => {
			return completedCount + ( child.props.completed ? 1 : 0 );
		}, 0 );
		return (
			
				<div>
					<div>
						<div>
							
						</div>
						<div>
							<label>{ completedLabel }</label></div></div></div>

export const getChildren = ( props ) => {
	return props.hasOwnProperty( 'children' ) &&
	Children.count( props.children ) ?
		Children.toArray( props.children ) :
		[];
};

export function ConditionalDetails( { children, summary } ) {
	return children && 0 < Children.toArray( children ).filter( ( child ) => child ).length
		? (
			<details>
				<summary>
					{ summary }
				</summary>

				{ children }

			</details>
		)
		: summary;
}

value: getValue( 'Tablet' ),
							placeholder: getValue() || child.props.placeholder,
							onChange: value => {
								if ( props.onChange ) {
									props.onChange( getAttrName( 'Tablet' ), value, 'Tablet' )
								} else {
									props.setAttributes( { [ getAttrName( 'Tablet' ) ]: value } )
								}
							},
						} )
					} ) }
				
			}
			{ screens.includes( 'mobile' ) &&
				
					{ Children.toArray( props.children ).map( child => {
						return cloneElement( child, {
							value: getValue( 'Mobile' ),
							placeholder: getValue( 'Tablet' ) || getValue() || child.props.placeholder,
							onChange: value => {
								if ( props.onChange ) {
									props.onChange( getAttrName( 'Mobile' ), value, 'Mobile' )
								} else {
									props.setAttributes( { [ getAttrName( 'Mobile' ) ]: value } )
								}
							},
						} )
					} ) }
				
			}
		
	)