Как заставить функцию onClick срабатывать по щелчку значка?

Я пытаюсь настроить функцию onClick для значка плюса FontAwesome. Значок появляется только рядом с любым элементом, у которого нет дочерних элементов (например, в моем вложенном меню элементы, внутри которых нет других элементов). Когда я тестирую onClick, console.info кажется, что каждый раз, когда я нажимаю на элемент в меню, он срабатывает либо два, либо четыре раза. Кто-нибудь знает, что я могу сделать, чтобы он срабатывал только при нажатии на значок плюса? Или почему он срабатывает каждый раз, когда щелкают любой элемент? Смотрите скриншоты ниже для более подробной информации.

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

Здесь я установил onClick внутри тега FontAwesome с плюсом.

  makeMenuLayer = layer => {
    const { objectKeys } = this.state;
    const layerKeys = Object.entries(layer).map(([key, value]) => {
{/*if the element still has children, insert an arrow, if not, insert nothing*/}      
var arrow = Object.keys(value).length ? (
        <FontAwesome name = "angle-right" />
      ) : (
        ""
      );
{/*if the element has no children, insert a plus sign, if not, insert nothing*/}
      var ex =
        Object.keys(value).length === 0 ? <FontAwesome name = "plus" onClick = {console.info("clicked")} /> : "";
      return (
        <ul key = {key}>
          <div onClick = {() => this.handleShowMore(key)}>
            {key} {arrow} {ex}
          </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 => {
    // eslint-disable-next-line
    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>;
  }
}

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

Это то, что появляется в консоли, когда я пытаюсь это проверить

Данные, с которыми я работаю: