Как сопоставить массив объектов, в котором также есть массив объектов?

Я использую TypeScript, и я немного новичок в этом. У меня есть такой массив, но ключи в 'orderBreakdownList' ("8" и "восходящий тренд") будут неизвестны приложению каждый раз, когда оно загружается.

{
  "userId": "00bdad66",
  "totalNumberOfOrders": 5,
  "totalNumberOfPackages": 54521,
  "totalNumberOfItems": 13,
  "totalNumberOfDeliveredOrders": 3,
  "totalPrice": 39409.0,
  "orderBreakdownList": [
    {
      "8": {
        "noOfItems": 1,
        "noOfPackages": 17160,
        "id": 8,
        "totalPrice": 3741.52,
        "orderItems": [
          {
            "upward-trending": {
              "tag": "upward-trending",
              "value": 6653.16,
              "price": 18798.89,
              "id": 76
            }
          }
        ]
      }
    }
  ]
}

Я пытаюсь отобразить массив orderBreakdownList, внутри которого есть объекты, и отобразить второй массив в список. (Выпадающая таблица с данными по одному элементу)

это то, что я пробовал до сих пор,

<div>
      {orderBreakdownList.map((items, index) => {
        return (
          <ol key = {index}>
            {items.map((subItems, sIndex) => {
              return <li key = {sIndex}> {subItems} </li>;
            })}
          </ol>
        );
     })}
</div>

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

Обновлено: По предложению @rantao я придумал следующий код. Использование только html без рамки CSS.

<div>
      {orderBreakdownList.map((orderBreakdown, i) => {
        const keyName = Object.keys(orderBreakdown);
        return (
          <div key = {i}>
            Order number: {keyName}
            {Object.values(orderBreakdown).map(
              (
                { noOfItems, noOfPackages, id, totalPrice, orderItems }: any,
                i
              ) => {
                return (
                  <div key = {i}>
                    <div>Id: {id}</div>
                    <div>Nr. of items: {noOfItems}</div>
                    <div>Nr. of packages: {noOfPackages}</div>
                    <div>Total price:{totalPrice}</div>
                    <ul>
                      {orderItems.map((item: any) =>
                        Object.values(item).map(
                          ({ tag, value, price, id }: any) => (
                            <li key = {id}>
                              <div>Id: {id}</div>
                              <div>Tag: {tag}</div>
                              <div>Value: {value}</div>
                              <div>Price: {price}</div>
                            </li>
                          )
                        )
                      )}
                    </ul>
                  </div>
                );
              }
            )}
          </div>
        );
      })}
    </div>