Getting 'undefined is not an object' error when trying to use MST in react native Ignite template

I am using Ignite template for react native. I have created a simple object model and store that looks like so:

export const TimeObject = types.model('TimeObject', {
  id: types.identifier,
  hour: types.string,
  minutes: types.string,
  amOrPm: types.enumeration(['AM', 'PM']),
  timeStamp: types.number,
  numOfDrugs: types.number,
});

export const TimeStore = types
  .model('TimeStore', {
    time: types.map(TimeObject),
  })
  .actions(self => ({
    addTime(json) {
      const ids = [];

      json.forEach(timeJson => {
        if (!timeJson.id) {
          timeJson.id = uuid.v1();
        }

        ids.push(timeJson.id);
        self.time.put(timeJson);
      });

      return ids;
    },
  }));

When I use this in a screen component:

const { timeStore } = useStores();

 const timeId = timeStore.addTime([
                {
                  hours,
                  mins,
                  amOrPm,
                  timeStamp: timeStamp.getTime(), //With correct values given for inputs
                },
              ]);

I get the undefined error. I am not sure what I'm doing wrong. I am testing this on Storybook, is there a different procedure to import it there?

I was able to solve this by just changing the order of ToggleStorybook and RootStoreProvider in app.tsx so that it now looks like this:

<RootStoreProvider value={rootStore}>
      <ToggleStorybook>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <RootNavigator
            ref={navigationRef}
            initialState={initialNavigationState}
            onStateChange={onNavigationStateChange}
          />
        </SafeAreaProvider>
      </ToggleStorybook>
</RootStoreProvider>

I think because Storybook was toggled it never went to the RootStore and was thus unable to access it inside Storybook components but this method works now.