Is this how you should set up a DELETE custom hook?

export function useRemoveUser() {
  // - optimistic updates
  const client = useQueryClient()
  return useMutation(
    (userId: any, client: any) => {
      return axios.delete(
        `https://api-for-personal-projects.vercel.app/api/contacts/${userId}`
      )
    },
    {
      onMutate: async () => {
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await client.cancelQueries(['users'])

        // Snapshot the previous value
        const previousUsers = client.getQueryData(['users'])

        // Optimistically update to the new value
        client.setQueryData(['users'], (old: any) => [...old])

        // Return a context object with the snapshotted value
        return { previousUsers }
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (err, newUser, context: any) => {
        client.setQueryData(['users'], context.previousUsers)
      },
      // Always refetch after error or success:
      onSettled: () => {
        client.invalidateQueries(['users'])
      }
    }
  )
}

  //. sever state management react query
  const { data, isLoading, isError } = useQuery(['users'], getUsers)
  getUsers()
  const updateUsers = useUpdateUsers()
  const removeUser = useRemoveUser()

      <section>
        {data
          .sort((a, b) => b.id - a.id)
          .map((user: any) => (
            <div
              key={user.id}
              {`${user.firstName} ${user.lastName}`}
              <button
                onClick={() => {
                  removeUser.mutate(user.id)
                }}
              >
                Remove
              </button>
            </div>
          ))}
      </section>