Как отрендерить сложный массив массивов JSON в React

Я новичок в React JS, я хочу отобразить этот JSON, содержащий категорию и список элементов ниже этой категории. Предположим, у state.miData есть ответ от сервера. В этой категории есть категория и список пунктов меню. Я хочу показать это в пользовательском интерфейсе, например в категории, и в списке категорий, которые попадают в эту категорию.

[
  {
    "category": {
      "name": "Pasta",
      "id": "P1"
    },
    "items": [
      {
        "menuItemId": "1",
        "menuItemName": "Alfredo-Pasta"
      },
      {
        "menuItemId": "2",
        "menuItemName": "Macroni-Pasta"
      }
    ]
  },
  {
    "category": {
      "name": "Burger",
      "id": "B1"
    },
    "items": [
      {
        "menuItemId": "2",
        "menuItemName": "UB-Burger"
      },
      {
        "menuItemId": "1",
        "menuItemName": "Thela-Mela-Burger"
      }
    ]
  }
]

Я написал этот код в функции рендеринга, но он не работает.

const data = this.state.miData
const listItems = data.map((d) => 
        <div>
            <p key = {d.category.id}>{d.category.name}</p> 
            <ul>
              d.items.map((mi) =>
                <li>{mi.menuItemName}</li>
              );
            </ul>
        </div>
    );
return (
    <div>
        {listItems}  
    </div>  
);

Заранее спасибо.