React Native Realm data not triggering UI update with useQuery and addListener

Hi folks,

In my React Native application, I use Realm to read data and node.js API for write operations, with flexible sync in RecoverUnsyncedChanges mode. I also have mutable subscriptions to filter data.

const orderList = useQuery(orderSchema);

On the screen component, I have added orderList as the dependency to useEffect, so whenever data changes in realm the component will re-render. And it is working fine.

But now I want to do some operation (suppose play a music ) when new order receives, and I have added the code like this,

orderList.addListener((orderList: any, changes: any) => {
    changes.insertions.forEach(() => {
        newOrderAlert.play();
    });
});

But after adding the event listener, the component is not rendering when data changes, I need to navigation between screen to see updated data (means data is updating but not UI).

Can you please help me with this?