Unable to cleanup subscription in my react native app

In my react native app I have subscribed to CartProduct data model inside the useEffect hook and using a return function I have canceled the subscription which should run when the component unmounts. But this doesn't seem to work because when I change the CartProduct model from a different screen I can see in the console that getCartProduct() run. How to fix this?

const[cartProducts, setcartProducts] = useState <CartProduct[]>([]);
  
const currentUserId = "28ab9cfc-6f0e-4cb4-9ac8-c875aecc7"

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

   
 useEffect(() => {

      getCartProduct()
         
    }, []);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW