Визуализация TreeView в React с использованием пользовательского интерфейса материала

Question

Мне нужно создать древовидное представление с помощью Material UI React JS. Но загвоздка в том, что JSON в древовидном представлении имеет предопределенную структуру. Чтобы просмотреть структуру, перейдите по ссылке

https://codesandbox.io/s/1slq1

И я получаю JSON от API в совершенно другом формате с массивом Objects & Больше. Ниже приведен пример ответа JSON от API

[{
   "order":123,
   "date" : 24-2-2020,
   "item":{
     "itemName" : "Item 01",
     "price" : 120,
     "charges" :[
      {
         "charge01" : "Delivery",
         "amount" : 110
      },
      {
         "charge02" : "Taxes",
         "amount" : 10
      }
    ],
     "otherDetails" : [
       {
            "data" : "somedata"
       }
    ]
   }
}]

Мне нужно создать функцию, в которой значение выше JSON преобразуется в предопределенный пользовательский интерфейс материала TreeView JSON. Ниже приведен код, который я пробовал, но безуспешно:

const renderTreeData = (dataItem: any) => {
  if (typeof (dataItem) == "object") {
    for (var key in dataItem) {
        return {
            id:key,
           name: dataItem[key].toString(),
           children: renderTreeData(dataItem[key])
        }
    }
   }   
    return renderData;
  }

Ниже приведен скриншот того, что требуется: