isPending issue of useWriteContract

[Ce1ling]

Goal: When I click the button to trigger writeContract, disable this button immediately (please note that it is immediately)

Example 1, in wagmi v1 I can do this:

export const Comp = ()=> {
  const { isLoading, write } = useContractWrite()

  return (
    <button disabled={isLoading} onClick={()=> write()}>
      click
    </button>
  )
}

Example 2, but it doesn’t seem to work in wagmi v2:

export const Comp = ()=> {
  const { isPending, writeContract } = useWriteContract()

  return (
    <button disabled={isPending} onClick={()=> writeContract()}>
      click
    </button>
  )
}

The problem with Example 2 is that it does not disable the button immediately after clicking it, but waits until RPC calls up the contract. So when my RPC node is slow, the user will click the button multiple times, resulting in this situation:

(evoke wallet multiple times)

I don't want to add a new useState to implement it, it would be too troublesome.

How to solve this problem? Thanks!