I'm coding a react native mobile application with aws amplify as my backend,

To get real-time updates in my app I used subscribe like this inside a useEffect hook,

const[cartProducts, setcartProducts] = useState <CartProduct[]>([]);
const getCartProduct = async () => {
  await DataStore.query(CartProduct, c=>c.userID("eq", currentUserId))
                 .then(setcartProducts)
};
            
useEffect(() => {       
  const subscription = DataStore.observe(CartProduct, d=>d.userID("eq", UserId))
                                .subscribe(msg => getCartProduct(),);
  return subscription.unsubscribe;
}, []);

the querying of data happens inside getCartProduct() function,

But the problem is whenever I close my app and reopen this screen the fetching function(getCartProduct) doesn't run I guess because there is no change in the data (cartProducts) in the backend.

When ever I change the cartProducts data in backend then the fetching function (getCartProduct) run again

what is the solution to this?