How to use the preact.toChildArray function in preact

let type = vnode.type;
	let props = vnode.props;

	// Apply DOM VNode compat
	if (typeof type != 'function') {
		// Apply defaultValue to value
		if (props.defaultValue) {
			if (!props.value && props.value !== 0) {
				props.value = props.defaultValue;
			}
			delete props.defaultValue;
		}

		// Add support for array select values: <select value="{[]}">
		if (Array.isArray(props.value) &amp;&amp; props.multiple &amp;&amp; type === 'select') {
			toChildArray(props.children).forEach(child =&gt; {
				if (props.value.indexOf(child.props.value) != -1) {
					child.props.selected = true;
				}
			});
			delete props.value;
		}

		// Normalize DOM vnode properties.
		let shouldSanitize, attrs, i;
		for (i in props) if ((shouldSanitize = CAMEL_PROPS.test(i))) break;
		if (shouldSanitize) {
			attrs = vnode.props = {};
			for (i in props) {
				attrs[
					CAMEL_PROPS.test(i) ? i.replace(/([A-Z0-9])/, '-$1').toLowerCase() : i
				] = props[i];</select>

SuspenseList.prototype.render = function(props) {
	this._next = null;
	this._map = new Map();

	const children = toChildArray(props.children);
	if (props.revealOrder && props.revealOrder[0] === 'b') {
		// If order === 'backwards' (or, well, anything starting with a 'b')
		// then flip the child list around so that the last child will be
		// the first in the linked list.
		children.reverse();
	}
	// Build the linked list. Iterate through the children in reverse order
	// so that `_next` points to the first linked list node to be resolved.
	for (let i = children.length; i--; ) {
		// Create a new linked list node as an array of form:
		// 	[suspended_count, resolved_count, next_node]
		// where suspended_count and resolved_count are numeric counters for
		// keeping track how many times a node has been suspended and resolved.
		//
		// Note that suspended_count starts from 1 instead of 0, so we can block
		// processing callbacks until componentDidMount has been called. In a sense

render({ children, onChange }, { url }) {
		let active = this.getMatchingChildren(toChildArray(children), url, true);

		let current = active[0] || null;

		let previous = this.previousUrl;
		if (url!==previous) {
			this.previousUrl = url;
			if (typeof onChange==='function') {
				onChange({
					router: this,
					url,
					previous,
					active,
					current
				});
			}
		}

canRoute(url) {
		const children = toChildArray(this.props.children);
		return this.getMatchingChildren(children, url, false).length > 0;
	}

export function Resizer(props: Props) {
	const dir = props.direction || "h";
	const children = toChildArray(props.children);

	const [sizes, setSizes] = useState(children.map(() => 100 / children.length));

	return (
		<div data-direction="{dir" class="{s.container}">
			{children.map((child, i) =&gt; {
				return (
					<div class="{s.item}">
						{child}
					</div>
				);
			})}
			{children.map(() =&gt; (</div>

render() {
		const children = toChildArray(this.props.children);
		const url = window.location.pathname || this.props.url;

		for (let i = 0; i < children.length; i++) {
			if (children[i].props.path === url) return children[i];
		}

		return <div>404 - No route matched.</div>;
	}
}

function MenuSection({ heading, children }) {
  return (
    
      {heading &amp;&amp; <h2>{heading}</h2>}
      <ul>
        {toChildArray(children).map(child =&gt; (
          <li>{child}</li>
        ))}
      </ul>
    
  );
}

render() {
    const func = toChildArray(this.props.children)[0]

    return this.state.mod && func ? func(this.state.mod) : null
  }
}