Как проверить, есть ли у вложенных объектов дети или нет?

Question

Я новичок в Javascript / React, поэтому я не уверен, как реализовать это в моей рекурсивной функции.У меня есть вложенное меню объектов json, и я хочу добавить маленькие стрелки, указывающие, есть ли другой уровень, на который можно щелкнуть или нет.Поскольку мое меню состоит из сильно вложенных объектов json, я использовал рекурсию, чтобы просмотреть все объекты и отобразить их как меню.Я включу скриншоты, чтобы визуально объяснить, что я пытаюсь сделать.

Есть ли у кого-нибудь какие-либо идеи о том, как проверить, есть ли у этого слоя объекты дочерние элементы, и если да, добавить стрелку (или что-нибудь еще)чтобы указать это?

Вот мой код:

class Menu extends React.Component {
  state = {
    categories: [],
    objectKeys: null,
    tempKeys: []
  };

  makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    const layerKeys = Object.entries(layer).map(([key, value], index) => {
      return (
        <ul key={key}>
          <div onClick={() => this.handleShowMore(key)}>{key}</div>
          {objectKeys[key] && this.makeMenuLayer(value)}
        </ul>
      );
    });
    return <div>{layerKeys}</div>;
  };

  handleShowMore = key => {
    this.setState(prevState => ({
      objectKeys: {
        ...prevState.objectKeys,
        [key]: !this.state.objectKeys[key]
      }
    }));
  };

  initializeTempKeys = layer => {
    Object.entries(layer).map(([key, value]) => {
      const newTempKeys = this.state.tempKeys;
      newTempKeys.push(key);
      this.setState({ tempKeys: newTempKeys });
      this.initializeTempKeys(value);
    });
  };

  initializeObjectKeys = () => {
    const { tempKeys } = this.state;
    let tempObject = {};
    tempKeys.forEach(tempKey => {
      tempObject[tempKey] = true;
    });

    this.setState({ objectKeys: tempObject });
  };

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

  render() {
    const { categories } = this.state;
    return <div>{this.makeMenuLayer(categories)}</div>;
  }
}

Вот как это выглядит в настоящее время, и я бы хотел, чтобы любой элемент, который имеет больше элементов внутри, имел стрелку иличто-то, чтобы показать, что есть больше вложенных данных (поэтому для этого у Одежды, Аксессуара, Одежды и т. д. были бы стрелки):

Вот примертип вещи, которую я собираюсь: