Заполните второй / третий уровни вложенного аккордеона динамически

Question

Мне нужно заполнить второй & третий уровень вложенного аккордеона (из semantic-ui-реагировать), и вот как я пытался его реализовать:

let lvl1Items = [];
let lvl2Items = [];
let lvl1Content;
let lvl2Content;


function handleOnItemTitleClickedLevel1(e, itemProps) {
//console.log("======>", e.currentTarget.textContent);
//let selected = e.currentTarget.textContent;

console.log(itemProps.index);
const index = itemProps.index;
lvl2Items = [];

elementsLevel2.forEach(function(item) {
    lvl2Items.push(
        {key: item.Name, title: item.Name, content: ''}
    )
});

lvl1Content = (
    <div>
        <Accordion.Accordion panels={lvl2Items} onTitleClick={handleOnItemTitleClickedLevel2} />
    </div>
)

//this.state.lvl1Items.forEach( (item) => item.key === selected ? 
item.content = {content : this.state.lvl2Items})
lvl1Items[index].content = {content : lvl1Content};
}

function handleOnItemTitleClickedLevel2(e, itemProps) {
console.log(itemProps.index);
const index = itemProps.index;
const lvl3Items = [];

elementsLevel3.forEach(function(item) {
    lvl3Items.push(
        {key: item.Name, title: item.Name, content: ''}
    )
});
console.log(lvl3Items);
lvl2Content = (
    <div>
        <Accordion.Accordio panels={lvl3Items} />
    </div>
)

lvl2Items[index].content = {content : lvl2Content};
}

class ProjectCustomize extends Component {

state = {
    //activeIndex: 0,
    // lvl1Items : [],
    // lvl2Items : [],
    // lvl3Items : []
}

componentDidMount() {
    lvl1Items = [];
    elementsLevel1.forEach(function(item) {
        lvl1Items.push(
            {key: item.Name, title: item.Name, content: lvl1Content}
        )
    });
}

render() {
    //const { lvl1Items, lvl2Items, lvl3Items } = this.state;

    //const lvl1Items = [];
    // const lvl2Items = [];
    // const lvl3Items = [];

    return (
        <Tabs>

            <Tab label="Quantities">


                                {/*<Accordion>*/}
                                {/*    {lvl1Items}*/}
                                {/*</Accordion>*/}

                               <Accordion /*defaultActiveIndex={0}*/ /*activeIndex={activeIndex}*/  panels={lvl1Items} styled onTitleClick={this.handleOnItemTitleClickedLevel1} />


            </Tab>
        </Tabs>
    );
}
}

Я новичок, чтобы реагировать, это правильный способ сделать это? возможно использовать состояние вместо глобальных переменных? .................................................. .................................................. .................................................. ......