Reactjs (v.15) делает родственный компонент дочерним

Question

У меня есть иерархия компонентов, как показано ниже (Источник). Мое требование заключается в том, что при рендеринге я хотел бы преобразовать это в Target для некоторого свойства, здесь я предполагаю, что flag

* Источник: 1006 *

<Parent>
   <Xyz flag={false}/>
   <One flag={true}/>
   <Two flag={true}/>
   <Three flag={true}/>
</Parent>

Цель:

<Parent>
   <Xyz>
      <One />
      <Two />
      <Three />
   </Xyz>
</Parent>

Мой подход:

В боковом рендере Parent

render() {
    const xyz = this.props.children.filter((children) => !children.props.flag);

    const kids = this.props.children.filter((children) => children.props.flag);

    const clonedXyz = React.cloneElement(xyz, [{...props}], [...kids]);
    return(
        <div>
            {clonedXyz}
        </div>
        );
}

Что выдает ошибку ожидаемый класс / функцию, но получил undefined в реагировать v15.x

Answer 1

Получил ответ, https://codesandbox.io/s/7ww8n4my9x

должно быть React.cloneElement(xyz[0], [{...props}], kids)