Get nested json values in ReactJS

I have code that gets all categories from json and then gets all items that are in nested in those categories.

The problem is, that I am not sure how to get properties of those nested objects. For instance I have engineering > civil-engineering and I want to get the 2 properties civil-engineering has: icon and label.

How do I do that?

Here is my component:

import skills from "./skills.json";

const Search = () => {
  return (
    <div className="iterate-object">
      {Object.keys(skills).map(function (keyName: string, keyIndex: number) {
        return (
          <ul key={keyIndex}>
            {keyName}
            {Object.keys(skills[keyName]).map(function (
              keyName: string,
              keyIndex: number
            ) {
              return <li>{keyName}</li>;
              // get icon and label here
            })}
          </ul>
        );
      })}
    </div>
  );
};

export default Search;

And here is sample of my json - more in codesandbox link

{
  "engineering": {
    "civil-engineering": {
      "label": "Civil Engineering (Architecture)",
      "icon": "CpuIcon"
    },
    "bioengineering": {
      "label": "Bioengineering",
      "icon": "CpuIcon"
    }
  },
  "science": {
    "astronomy": {
      "label": "Astronomy",
      "icon": "RocketIcon"
    },
    "biology": {
      "label": "Biology",
      "icon": "CpuIcon"
    }
  }
}

Here is my current workspace copy: https://codesandbox.io/s/error-9xswz?file=/src/App.tsx