React how to create a data structure?

Question

React

Hello, I'm using react-sortable-tree. There is a list of objects and by clicking on this object, show its children:

import React, { Component } from 'react';
import SortableTree, { addNodeUnderParent, removeNodeAtPath } from 'react-sortable-tree';


const firstNames = [
  'Adidas',
  'Nike',
  'Rebook'
];


class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            treeData: [
                { title: 'Adidas', children: null},
                { title: 'Nike', children: null},
                { title: 'Rebook', children: null}
            ]
        };
    }

    render() {
        //const getNodeKey = ({ treeIndex }) => treeIndex;
        const getRandomName = () =>
          firstNames[Math.floor(Math.random() * firstNames.length)];
        return (
            <div>

                <div style={{ height: 300 }}>
                    <SortableTree
                        treeData={ this.state.treeData }
                        onChange={ () => {
                            this.state.treeData.map((node) => {
                                node.children;
                            })
                        }}

                    />
                </div>

                <button
                    onClick={() =>
                        this.setState(state => ({
                            treeData: state.treeData.concat({
                                title: `${getRandomName()} ${getRandomName()}sson`,
                            }),
                        }))
                    }
                    id="add"
                >
                  + ADD
                </button>
          </div>
        );
    }
}

How to solve such a problem?