I am using the Realm Web SDK and I have a custom React Hook that does the subscription for the collection watch.

The issue is that the subscription only works once. After the first subscription changes comes through, no other changes work. Is there something I am missing?

import { useDataSalesCashCountList } from "./data-list";
import {
  SelectCrudActionType,
  SelectObjectStatus,
  getCol,
  isDevMode,
  subscriptionMutationFn,
  useDataForUserAuth,
} from "@submodules/booster-pack";
import {
  DataLoadingState,
  SalesCashCount,
  SalesCashCountSchema,
} from "@models";
import { useServiceFnSalesCashCount } from "./data-services";
import { useObserveEffect } from "@legendapp/state/react";
import { observable } from "@legendapp/state";
import { saleDate } from "@pages/sales/make-sale-utils";

const refNameSalesCashCountList = "useDataSalesCashCountList";
const state = useDataSalesCashCountList.items;
const subState = observable({
  shouldSub: null as boolean | null,
  worker: null as Worker | null,
});

export const useDataSalesCashCountSubs = () => {
  const mutationFn = useDataSalesCashCountList.mutationFn;
  const serviceFxns = useServiceFnSalesCashCount;

  const doSubs = async () => {
    try {
      const currentUser = useDataForUserAuth?.currentUser.get();
      const currentTeamMember = useDataForUserAuth?.teamMember.get();
      const isLoggedIn = useDataForUserAuth?.isLoggedIn.get();
      const col = getCol({
        collectionName: SalesCashCountSchema.name,
        currentUser,
      });

      for await (const change of col.watch({
        filter: {
          "fullDocument.companyBranch": currentTeamMember?.companyBranch?._id,
          "fullDocument.teamMemberCashier": currentTeamMember!._id,
          "fullDocument.statusCashier": SelectObjectStatus.ACTIVE,
          "fullDocument.salesDate": saleDate,
        },
      })) {
        let breakAsyncIterator = false;
        switch (change.operationType) {
          case "insert": {
            const { documentKey, fullDocument } = change;

            if (isDevMode) {
              console.log(
                `doSubs on: ${refNameSalesCashCountList} new document: ${documentKey}`,
                fullDocument
              );
            }

            if (serviceFxns.findOneData) {
              const foundItem = await serviceFxns.findOneData({
                id: fullDocument._id,
                userInfo: { currentTeamMember, currentUser, isLoggedIn },
              });

              if (foundItem) {
                await subscriptionMutationFn<SalesCashCount>({
                  newItem: foundItem as SalesCashCount,
                  state,
                  mutationType: SelectCrudActionType.CREATE,
                  mutationFn,
                });
              }
            }

            breakAsyncIterator = true;
            break;
          }
          case "update": {
            const { documentKey, fullDocument } = change;

            if (isDevMode) {
              console.log(
                `doSubs on: ${refNameSalesCashCountList} updated document: ${documentKey}`,
                fullDocument
              );
            }

            if (serviceFxns.findOneData && fullDocument) {
              const foundItem = await serviceFxns.findOneData({
                id: fullDocument._id,
                userInfo: { currentTeamMember, currentUser, isLoggedIn },
              });

              if (foundItem) {
                await subscriptionMutationFn<SalesCashCount>({
                  newItem: foundItem as SalesCashCount,
                  state,
                  mutationType: SelectCrudActionType.UPDATE,
                  mutationFn,
                });
              }
            }

            breakAsyncIterator = true;
            break;
          }
          case "replace": {
            const { documentKey, fullDocument } = change;

            if (isDevMode) {
              console.log(
                `doSubs on: ${refNameSalesCashCountList} replaced document: ${documentKey}`,
                fullDocument
              );
            }

            if (serviceFxns.findOneData && fullDocument) {
              const foundItem = await serviceFxns.findOneData({
                id: fullDocument._id,
                userInfo: { currentTeamMember, currentUser, isLoggedIn },
              });

              if (foundItem) {
                await subscriptionMutationFn<SalesCashCount>({
                  newItem: foundItem as SalesCashCount,
                  state,
                  mutationType: SelectCrudActionType.UPDATE,
                  mutationFn,
                });
              }
            }

            breakAsyncIterator = true;
            break;
          }
          case "delete": {
            const { documentKey } = change;

            if (isDevMode) {
              console.log(
                `doSubs on: ${refNameSalesCashCountList} deleted document: ${documentKey}`
              );
            }

            await subscriptionMutationFn<SalesCashCount>({
              deletedId: documentKey._id,
              state,
              newItem: { _id: documentKey._id } as any,
              mutationType: SelectCrudActionType.DELETE,
              mutationFn,
            });

            breakAsyncIterator = true;
            break;
          }
        }
        if (breakAsyncIterator) break;
      }
    } catch (error) {
      if (isDevMode) {
        console.log(
          `doSubs error on: ${refNameSalesCashCountList} is ${error}`
        );
      }
    }
  };

  useObserveEffect(async () => {
    const currentUser = useDataForUserAuth?.currentUser.get();
    const currentTeamMember = useDataForUserAuth?.teamMember.get();
    const loadingAuthUser = useDataForUserAuth?.loadingAuthUser.get();
    const loadingTeamMember = useDataForUserAuth?.loadingTeamMember.get();

    if (currentUser == null || currentUser == undefined) {
      return;
    }

    if (currentTeamMember == null || currentTeamMember == undefined) {
      return;
    }

    const readyToSub =
      currentUser &&
      currentTeamMember &&
      loadingAuthUser !== DataLoadingState.LOADING &&
      loadingTeamMember !== DataLoadingState.LOADING;

    if (readyToSub == true && subState.shouldSub.get() == null) {
      if (isDevMode) {
        console.log(
          "readyToSub",
          readyToSub,
          "subState",
          subState.shouldSub.get()
        );
      }
      doSubs();
      subState.shouldSub.set(false);
    }
  });
};