MobX создает и ссылается на новые Observables на основе значений внутри установленных Observables

В одной из функций моего приложения я синхронизируюсь с Firebase, чтобы получить список активных событий. Основной результат этого означает, что наблюдаемая будет неоднократно устанавливаться в режиме реального времени. Это здорово, но привело к некоторым проблемам с MobX. Чтобы продемонстрировать, взгляните на соответствующий магазин:

import { observable, computed, autorun, extendObservable, reaction } from "mobx";
import { subscribe } from "./firebase";


class HomeStore {


    @observable activeEvents = {};

    @observable currentEvents = [];

    constructor() {
        console.log(this);
        // subscribe( root => root.ref("meta/activeEvents"), this.activeEvents, "object" );
        setTimeout(() => this.currentEvents["RE-VRC-16-1274"] = true, 100);
        reaction(
            () => Object.keys(this.currentEvents),
            events =>
                events.map( event =>
                    this.currentEvents[event] === true ?
                    subscribe( root => root.ref(`events/${event}`), this.currentEvents[event], "object") :
                    null
                )
            );


    }

}

export default new HomeStore();

Здесь функция subscribe свяжет определенную часть моей базы данных с указанным наблюдаемым объектом (функция setTimeout делает практически то же самое). То, что я пытаюсь достичь, таково:

1. Состояние пусто, как указано в исходном состоянии хранилища.
2. Моя функция subscribe() изменяет значения дочерних элементов this.currentEvents, что вызывает реакцию на создание новых наблюдаемых и их подписку на соответствующий путь в базе данных.

3. Поскольку эти наблюдаемые изменяются на subscribe(), изменяется функция render() моего React Component. См. Ниже этот источник

   import { h, Component } from 'preact';
   import { List, ListItem, Icon } from 'preact-mdl';
   import { observer } from "mobx-observer";
   
   import { icon, center } from "../style";
   
   import HomeStore from "../stores/home";
   
   @observer
   export default class EventList extends Component {
   
   constructor() {
       super();
       this.store = HomeStore;
   }
   
   render() {
           console.log("EventList Renders", Object.assign({}, this.store.events));
           return (
               <List>
                       {Object.keys(this.store.currentEvents).map( event =>
                           <ListItem two-line>
                               <span class="mdl-list__item-primary-content">
                                   <Icon icon="event" class="material-icons mdl-list__item-avatar" style={icon.avatar}></Icon>
                                   <span>{ this.store.currentEvents[event].name ? this.store.currentEvents[event].name : "Loading..." }</span>
                                   <span class="mdl-list__item-sub-title">{ event }</span>
                               </span>
                           </ListItem>
                       )
                   }
               </List>
           );
       }
   }
   

Кажется, что это должно быть довольно легко сделать, но я борюсь. Я делаю это неправильно? Есть ли лучший подход? Любые советы очень приветствуются!