Reason for duplicating element from props.children on React.cloneElement(child)?

Question

React

Such a design:
1) Option.

renderChildren(props) {

    let child = Children.only(props.children);
    return cloneElement(child, Object.assign({}, props));
  }

  render() {
    return (
      this.renderChildren(this.props)
    );
  }

Option 2:

renderChildren(props) {

    let child = Children.only(props.children);
    return cloneElement(child, Object.assign({}, props));
  }

  render() {
    return (
      <div>{this.props.children}</div>
    );
  }

An element is wrapped in a component.
In option 1, it turns out:

<ul>
    <li>
        <li></li>
    </li>
</ul>

At 2:

<ul>
    <div>
        <li></li>
    </div>
</ul>

Answer 1

The problem is here:
Namely, in Object.assign({}, props)
Since children are in props , and here I am forwarding it to a descendant (which, in fact, is in children ) - duplication occurs.