How to use React Query with React's Context API

const [products, setProducts] = useState<Product[]>([]);

const {
    data: fetchedProducts,
    isFetching: isProductsFetching,
    isLoading: isProductsLoading,
    refetch: refetchProducts,
  } = useQuery({
    queryKey: ['products'],
    queryFn: () =>
      getProducts()
        .then((res) => res.json())
        .then((response: getProductsResponse) => response.data),
});

const [products, setProducts] = useState<Product[]>([]);

const {
    data: fetchedProducts,
    isFetching: isProductsFetching,
    isLoading: isProductsLoading,
    refetch: refetchProducts,
  } = useQuery({
    queryKey: ['products'],
    queryFn: () =>
      getProducts()
        .then((res) => res.json())
        .then((response: getProductsResponse) => response.data),
});

const addNewProduct = (product: Product): void => {
  setProducts(addProduct(products, product));
};

const getAProductById = (productId: string) => getProductById(products, productId);

const deleteAProduct = (productId: string) => {
  setProducts(products.filter((product) => product.productId !== productId));
};

const addNewProduct = (product: Product): void => {
  setProducts(addProduct(products, product));
};

const getAProductById = (productId: string) => getProductById(products, productId);

const deleteAProduct = (productId: string) => {
  setProducts(products.filter((product) => product.productId !== productId));
};