How to use the preact.cloneElement function in preact

render({ childFactory, transitionLeave, transitionName, transitionAppear, transitionEnter, transitionLeaveTimeout, transitionEnterTimeout, transitionAppearTimeout, component, ...props }, { children }) {
		// TODO: we could get rid of the need for the wrapper node
		// by cloning a single child
		let childrenToRender = [];
		for (let key in children) if (children.hasOwnProperty(key)) {
			let child = children[key];
			if (child) {
				let ref = linkRef(this, key),
					el = cloneElement(childFactory(child), { ref, key });
				childrenToRender.push(el);
			}
		}

		return h(component, props, childrenToRender);
	}
}

renderRadio = (child, index) => {
		const selectedValue = this.selectedValue;

		return cloneElement(child, {
			checked: selectedValue ? child.props.value === selectedValue : index === 0,
			key: index,
			onChange: this.handleOnChange,
			disabled: this.props.disabled,
			...child.props
		});
	}

render() {
      const {children$: children, ...props} = {...this.props, ...this.state};
      if (tag) {
        return h(tag, props, ...children);
      }
      return children instanceof VNode ? cloneElement(children, props) : children;
    }
  }

		{children.map((child) => cloneElement(child, { className: createClassName(styles, 'button-group__item') }))}

return h(tagName, { ...props, style: containerStyle, ref: (r) => { this.refs.container = r } }, [
      cloneElement(
                renderView({ style: viewStyle }),
                { key: 'view', ref: (r) => { this.refs.view = r } },
                children
            ),
      cloneElement(
                renderTrackHorizontal({ style: trackHorizontalStyle }),
                { key: 'trackHorizontal', ref: (r) => { this.refs.trackHorizontal = r } },
                cloneElement(renderThumbHorizontal({ style: thumbHorizontalStyleDefault }), { ref: (r) => { this.refs.thumbHorizontal = r } })
            ),
      cloneElement(
                renderTrackVertical({ style: trackVerticalStyle }),
                { key: 'trackVertical', ref: (r) => { this.refs.trackVertical = r } },
                cloneElement(renderThumbVertical({ style: thumbVerticalStyleDefault }), { ref: (r) => { this.refs.thumbVertical = r } })
            )
    ])
  }
}

						.map((child) => cloneElement(child, { error: !!error }))
					: children}

newChildren = newChildren.map( c => {
				if (!c.props[showProp] && isShownInChildren(prevChildMapping, c, showProp)) {
					c = cloneElement(c, { [showProp]:true });
				}
				return c;
			});
		}

function stripDataJsx(child) {
  return cloneElement(child, { "data-jsx": undefined });
}

export function Localizer({ children }, { intl }) {
	let child = children && children[0];
	return child && cloneElement(child, translateMapping(child.attributes, intl, true));
}

.map((c) => {
    const className = (c.className ? c.className + ' ' : '') + 'preact-head'
    return cloneElement(c, { className })
  })
}