how to add button to tree menu heading, i have a requirement of adding button (expand/Collapse button to all menu headings) - treeview

Question

HEADING 1- (expand/collapse - button)
a) sub item-1.1
b) sub item-1.2
HEADING -2 (expand/collapse - button)
a) sub item -2.1
b) sub item -2.2
3)HEADING -3
4)HEADING -4
I tried below code and achieved till tree view ,
but unable to add Expand/Collapse button on/to menu heading ,
like above , and to achieve button click functionality to expand tree menu(when tree
menu Heading expanded the button text be changed to collapse other wise it was
Expand).
import React from 'react';
import logo from './logo.svg';
import './App.css';
import TreeMenu from 'react-simple-tree-menu'
function App() {
const treeData = {
'first-level-node-1': {
label: 'Node 1 ',
index: 0,
nodes: {
'second-level-node-1': {
label: 'Node 1.1',
index: 0,
nodes: {
'third-level-node-1': {
label: 'Node 1.1.1',
index: 0,
nodes: {}
},
},
},
},
},
'secondt-level-node-1': {
label: 'Node 1 ',
index: 0,
nodes: {
'second-level-node-1': {
label: 'Node 1.1',
index: 0,
nodes: {
'third-level-node-1': {
label: 'Node 1.1.1',
index: 0,
nodes: {}
},
},
},
},
},
'third-level-node-2': {
label: 'Node 2 ',
index: 1,
nodes: {
'second-level-node-1': {
label: 'Node 2.1',
index: 0,
nodes: {}
},
},
},
};
return (
<div className="App">
<button></button>
<TreeMenu data={treeData} />
</div>
);
}
export default App;