I'm trying to execute a query when an array gets to be updated, but the query executes immediately!

So I have checkedProducts array I push some data into it when the screen mount, so my goal is to execute the query when this array has data.

here's the hook

import {useQuery} from 'react-query';
import {checkAvailableProducts} from '../Api';

export type checkProductItem = {
  product_id: number;
  detail_id: number;
};
export interface checkProducts {
  products: checkProductItem[];
}

export const useCheckAvailableProducts = (products?: checkProducts) => {
  console.log('products-RQ', products);
  return useQuery(
    ['checkAvailableProducts'],
    () => checkAvailableProducts(products),
    {
      enabled: !!products?.products, // OR products?.products.length > 0 not works
    },
  );
};

component

....
  const [checkedProducts, setCheckedProducts] = useState<checkProducts>();
  const {data: unavailableProducts, refetch} = useCheckAvailableProducts(
    checkedProducts,
  );


  React.useEffect(() => {
    if (cartProducts.length) {
      let productsIDs = cartProducts.map(prod => {
        return {
          product_id: prod.id,
          detail_id: prod.detail_id,
        };
      });
      Promise.all(productsIDs).then(allProductsIDs => {
        console.log('allProductsIDs', allProductsIDs);
        return setCheckedProducts({
          products: allProductsIDs,
        });
      });
    }
  }, [cartProducts]);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      refetch();
      console.log('unavailableProducts:', unavailableProducts);
      if (unavailableProducts && unavailableProducts.length > 0) {
        console.log('hey if0update!!!');
        updateCart(unavailableProducts);
      }
    });
    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation, refetch, unavailableProducts, updateCart]);