React Query v4 gives me Missing queryFn for queryKey when queryClient.setQueryData

Question

I am continuously getting following error

Missing queryFn for queryKey '["cocktail","favorites"]'

Here is my implementation

import { useQueryClient } from '@tanstack/react-query'

interface ICocktailCardProps {
    cocktail: ICocktail
    mode: 'home' | 'favorites' | 'search'
}

const CocktailCard: React.FC<ICocktailCardProps> = ({ cocktail, mode }) => {

    const queryClient = useQueryClient();

    const handleAddToCart = () => {
        queryClient.setQueryData<ICocktail[]>(['cocktail', 'favorites'], (oldData) =>
            [...(oldData || []), cocktail]);
    };

    const handleRemoveFromCart = () => {
        queryClient.setQueryData<ICocktail[]>(['cocktail', 'favorites'], (oldData) =>
            oldData?.filter((item) => item.idDrink !== cocktail.idDrink)
        );
    };

    return (
        <div className='card-container'>
            <div>{cocktail.strDrink}</div>
            <img className='thumb-image' src={cocktail.strDrinkThumb}
                alt={cocktail.strDrink} />
            {mode === 'home' ? <div>{cocktail.strCategory}</div> : null}
            {mode === 'search' ? <button onClick={() => void handleAddToCart()}>Add</button> : null}
            {mode === 'favorites' ? <button onClick={() => void handleRemoveFromCart()}>Remove</button> : null}
        </div>
    )
}

export default CocktailCard