Настройка динамического меню с объектами API json?

Я не уверен, что я мог бы сделать, чтобы эта работа работала... Поэтому я вызываю данные API (которые представляют собой просто набор вложенных объектов json), чтобы создать меню. Пока у меня работает так, что рендерит первый слой объектов (первое изображение), и когда вы нажимаете на каждый элемент, под ним появляется следующий уровень (второе изображение). Это работает рекурсивно, поэтому я предполагаю, что это работает для следующего уровня вниз, когда я нажимаю на элемент на «уровне 2», но это не так.

Может ли кто-нибудь увидеть, что я могу изменить в своем коде, чтобы это заработало?

class Menu extends React.Component {
  state = {
    categories: [],
    list: ""
  };


  //handle displaying list of values when clicking on button
  //search for list of values within object
  handleSearch = (obj, next, event) => {
    // console.info(event.target.name);
    Object.keys(obj).forEach(key => {
      if (typeof obj[key] === "object") {
        if (next === key) {
          //create DOM  CHILDREN
          createData(Object.keys(obj[key]), key, this.test, event);
        }
        this.handleSearch(obj[key], next);
      }
    });
  };

  componentDidMount() {
    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {
      this.setState({ categories: response.data });
    });
  }

  render() {
    return (
      <React.Fragment>
        {/* display list of things */}
        <div className = "columns is-multiline">
          {Object.keys(this.state.categories).map(key => (
            <div className = "column is-4">
              <div
                onClick = {event =>
                  this.handleSearch(this.state.categories, key, event)
                }
              >
                {key}
              </div>
              <div name = {key + "1"} />
            </div>
          ))}
        </div>
      </React.Fragment>
    );
  }
}

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

var index = 1;
export function createData(data, key, search, e) {
  e.stopPropagation();
  let parent = document.getElementsByName(key + "1");

  //create elements and append them
  for (let i = 0; i < data.length; i++) {
    let wrapper = document.createElement("ul");
    wrapper.innerHTML = data[i];
    wrapper.name = data[i] + index + 1;
    wrapper.addEventListener("click", search(data[i]));
    parent[0].append(wrapper);
  }
}

вот скриншот "категорий" в консоли (объекты внутри объектов внутри объектов)