Пользовательский интерфейс материала - структура данных TreeView

Question

Я хочу структурировать данные, полученные от сервера, чтобы я мог использовать компонент TreeView из Material UI: https://material -ui.com / api / tree-view /

Я получаю большие объемы данных, поэтому я хочу получить дочерние узлы с сервера, когда пользователь нажимает кнопку расширения. Таким образом, при развертывании первого узла HTTP-запрос отправляется на сервер, который возвращает все дочерние элементы этого узла. Когда расширяется другой узел, выбираются дочерние элементы этого узла и т. Д.

При запуске страницы я хочу получить корневой узел и его дочерние элементы. Возвращенный JSON будет выглядеть примерно так:

{
 "division": {
 "id": "1234",
 "name": "Teest",
 "address": "Oslo"
 },
 "children": [
   {
    "id": "3321",
    "parentId": "1234",
    "name": "Marketing",
    "address": "homestreet"
   },
   {
    "id": "3323",
    "parentId": "1234",
    "name": "Development",
    "address": "homestreet"
   }
 ]
}

При расширении узла Marketing я хочу сделать HTTP-вызов для извлечения дочерних элементов этого узла. Таким образом, я получу JSON следующим образом:

{
  "children": [
    {
      "id": "2212",
      "parentId": "3321",
      "name": "R&D",
      "address": "homestreet"
    },
    {
      "id": "4212",
      "parentId": "3321",
      "name": "Testing",
      "address": "homestreet"
    }
  ]
}

Но я не совсем понимаю, как создать такую ​​структуру данных, которая впоследствии может быть использована моим компонентом TreeView. Как я могу создать такую ​​структуру?