ReactJS сортируемый компонент на основе onClick

Question

Я пытаюсь использовать реагирующую сортировку-хо c для достижения сортируемой компоненты, но не вижу удачи. В настоящее время у меня есть кнопка, которая добавит компонент в текущий компонент, и я хочу сделать его сортируемым для обоих компонентов. Есть ли способ добиться этого? Большинство примеров, которые я видел, использует локальную объявленную переменную и сортирует ее только, этот пример похож на то, чего я хочу достичь, но все же отличается от того, что я на самом деле хочу.

https://codepen.io/cristobalchao/pen/JqOpEZ

Вот так я добавляю к нему компонент

import {NewComponent} from './components/NewComponent';

class App extends React.Component {
 constructor()
 {
  super();
  this.state = {
    children: []
  };
 }

   appendChild() {
     this.setState({
       children: [
         ...this.state.children, <NewComponent/>
       ]
     });
   }

    render() {
      return (
      <div>
       <button onClick={() => this.appendChild()}>Append Child</button>
        <div>
         {this.state.children.map(child => child)}
        </div>
      </div>

Любые предложения или демонстрация приветствуются, спасибо заранее!