I have a three-check box type,

When I check any box I call refetch() in useEffect(). The first time, I check all boxes and that returns the expected data!

but for some cases "rechange the checkboxes randomly", the returned data from API is "undefined" although it returns the expected data in Postman!

So I Guess should I need to provide a unique queryKey for every data that I want to fetch

so I provide a random value "Date.now()" but still return undefined

Code snippet

 type bodyQuery = {
    product_id: number;
    values: {};
  };
  const [fetch, setFetch] = useState<number>();
  const [bodyQuery, setBodyQuery] = useState<bodyQuery>({
    product_id: item.id,
    values: {},
  });

 const {
    data: updatedPrice,
    status,
    isFetching: loadingPrice,
    refetch,
  } = useQuery(
    ['getUpdatedPrice', fetch, bodyQuery],
    () => getOptionsPrice(bodyQuery),
    {
      enabled: false,
    },
  );

  console.log('@bodyQuery: ', bodyQuery);
  console.log('@status: ', status);
  console.log('@updatedPrice: ', updatedPrice);

  useEffect(() => {
    if (Object.keys(bodyQuery.values).length > 0) {
      refetch();
    }
  }, [bodyQuery, refetch]);



export const getOptionsPrice = async (body: object) => {
  try {
    let response = await API.post('/filter/product/price', body);
    return response.data?.detail?.price;
  } catch (error) {
    throw new Error(error);
  }
};