SyncManagaer not receiving Channel Events

I am using SyncManager in Javascript API to receive events of Group Channels as shown below:
The application is a responsive web created using ReactJS. I am facing a strange problem here .

If I create some channels with Desktop Web, chatCollection.fetch(); is not trigerring onChannelEvent when the app is opened in Mobile Browser.

Also if I create some channels with Mobile Web, chatCollection.fetch() is not trigerring onChannelEvent when the app is opened in Desktop Web.

    SendBirdSyncManager.setup(session?.id, () => {

              const query = sendBird.GroupChannel.createMyGroupChannelListQuery();
              query.includeEmpty = true;
              query.order = "latest_last_message";
              query.limit = 15;

              query.unreadChannelFilter =
                sendBird.GroupChannel.UnreadChannelFilter.ALL;
              query.hiddenChannelFilter =
                sendBird.GroupChannel.HiddenChannelFilter.ALL;

              const handler = new SendBirdSyncManager.ChannelCollection.CollectionHandler();

              handler.onChannelEvent = (action, channels) => {
                switch (action) {
                  case SendBirdSyncManager.ChannelCollection.Action.INSERT:
                    // Updating channels here
                    break; 

                  case SendBirdSyncManager.ChannelCollection.Action.UPDATE:
                      // Updating channels here
                      break; 
                  }

                }
              };

              chatCollection = new SendBirdSyncManager.ChannelCollection(query);
              chatCollection.setCollectionHandler(handler);
              chatCollection.fetch();
    });

At the same time if instead of chatCollection.fetch();, I do the query using sendBird.GroupChannel.createMyGroupChannelListQuery directly, it is returning all the channels in both the cases

Please let me know what I am doing wrong in using SyncManager