I am using react-table, which depends on some MobX observable data. My component is wrapped with observer() and my table row data is memoized using useMemo, as you do with react-table. The problem is, this useMemo doesn't react to store updates.

  const fetcher = useDataFetcher(props.selected, bookmarkStore.f.loadBare);

  // this loads additional row data using a mobx store action
  useEffect(() => {
    (async () => {
      const ids = fetcher.items.results.map((a) => a.document);
      await documentStore.loadIds(ids);
    })();
  }, [fetcher.items.results]);

  // this doesn't get updated when new ids are loaded, affecting documentStore.docsById
  const bookmarks = useMemo(
    () =>
      fetcher.items.results.map((bookmark) => {
        let docId = bookmark.document;
        const doc = documentStore.getDocById(docId);
        return { ...bookmark, document_data: doc };
      }),
    [fetcher.items.results,
     documentStore.docsById // this is the dependency that doesn't do anything
    ]
  );

  const data = bookmarks;

  // setup react-table with this data

And I can't remove the useMemo call because then the react-table goes into infinite re-render, crashing the app. Can I somehow get rid of useMemo when using react-table or is there a way for this useMemo store dependency to work?