Как изменить родительское состояние из дочернего дерева состояний Mobx?

Я пытаюсь создать Nav в reactjs с помощью Mobx State Tree.

Прямо сейчас у меня тонкая вертикальная панель навигации со списком значков. Теперь я хочу добавить к определенным пунктам подменю. При щелчке по ним Nav переходит от тонкого к широкому (т. Е. Расширяется), и отображаются элементы подменю. Как только пользователь нажимает на одну из них, Nav возвращается к уменьшенной версии.

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

import { types } from "mobx-state-tree";
import NavItem from "./NavItem.js";
const NavStore = types
  .model("NavStore", {
    expanded: false,
    nav_items: types.array(NavItem)
  })
  .actions(self => ({}))
  .views(self => ({}))
  .create({

  });

export default NavStore;


import { types } from "mobx-state-tree";

const NavItem = types
  .model("NavItem", {
     expands: false,
     title: types.string
  })
  .actions(self => ({
    itemClicked() {

    }
  }))
  .views(self => ({}));

export default NavItem