Perform PUT/PATCH request with #tanstack/vue-query - vue.js

Question

Currently I'm using vue-query by tanstack in my vue 3 app with the following code structure.
I have the following code in my todo/edit.vue
<template>
<v-container>
<v-row cols="12">
<v-text-field label="Name" v-model="formData.title"></v-text-field>
</v-row>
<v-row cols="12">
<v-text-field label="Price" v-model="formData.price"></v-text-field>
</v-row>
<v-row cols="12">
<v-col md="6" offset="6">
<v-btn color="success" #click="submit">Submit</v-btn>
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
import { useQuery, useMutation, useQueryClient } from "#tanstack/vue-query"
import { fetchProduct, update} from "../services/product"
import { reactive } from "vue"
import { useRoute, useRouter } from "vue-router"
import type { IProduct } from "#/interface"
const route = useRoute()
let formData = reactive<IProduct>({
id: "",
title: "",
price: "",
category: "",
email: "",
})
const {
isLoading,
isError,
data: loadedData,
error,
refetch,
} = useQuery({
queryKey: ["getOneProduct", route.params.id],
queryFn: fetchProduct,
select: (data: any) => (formData = data),
})
const mutation = useMutation({
mutationFn: ({id, data}) => {
return update(id, data)
},
onSuccess: () => {
alert("success")
},
})
const submit = () => {
mutation.mutate({id:formData.id, data:formData})
}
</script>
My services/product.ts contains
import { API } from "../util/API"
import type { IProduct } from "../interface/IProduct"
export interface IProductsResponse {
products?: Array<IProduct>
total?: number
skip?: number
limit?: number
}
export const fetchProducts = async (): Promise<IProductsResponse> => {
return await API.get<IProductsResponse, any>(`/products?limit=10&select=id,title,price,category`)
}
export const fetchProduct = async (param: any): Promise<IProduct> => {
const id = param.queryKey[1]
const response = await API.get<IProduct, any>(`products/${id}`)
return response
// return await API.get<IProduct, any>(`/products/`)
}
export const update = async (id: any, data: any): Promise<IProduct> => {
return API.put(`/products/${id}`, data)
}
With the above code setup I'm getting the following errors:
Property 'id' does not exist on type 'void'.
Property 'data' does not exist on type 'void'.
Refereeing to the line:
mutationFn: ({id, data}) => {
return update(id, data)
},
And error message
Argument of type '{ id: string | number; data: { id: string | number; title: string; price: string | number; category: string; email: string; }; }' is not assignable to parameter of type 'void'.
Refereeing to line:
mutation.mutate({id:formData.id, data:formData})
What would be the correct way to perform PUT/PATCH operation with "#tanstack/vue-query" ?