How do I get Wagmi useWaitForTransaction to wait for Metamask (running on Hardhat)?

Question

I am using Wagmi's useWaitForTransaction together with Metamask, running on local Hardhat node. When I sign a transaction it almost immediately returns successful on the front end, but on Metamask it is still pending.

Is there some logic to Metamask's transaction handling? How can I make the frontend to appear to be in sync with Metamask?

My component:

  function WethApproval() {
    const [approvalLimit, setApprovalLimit] = useState(0);

    const approveWeth = useContractWrite({
      ...wethContractConfig,
      functionName: 'approve',
      onSuccess(data) {
        console.log('approve success hash ', data);
      }
    });

    const { data: approveTx, isError, isLoading } = useWaitForTransaction({
      hash: approveWeth?.data?.hash,
      confirmations: 1,
      onSuccess(data) {
        console.log('approve tx successful data ', data);
      },
      onError(err) {
        console.log('approve tx error data ', err);
      }
    });

    function ActionButton() {
        if (approveWeth.isLoading) {
          return (
            <button disabled={true}>
              Confirm in Metamask
            </button>
          )
        }

        if (!approveWeth.data) {
          return (
            <button onClick={() => {
              approveWeth?.write({ args: [_grantee, _approvalLimit] })
            }}> 
              Approve
            </button>
          )
        }

        console.log('approval tx = ', approveTx)
        if (approveTx?.status=="success") {
          return (
          <button disabled={true}>
            Receipt &nbsp; : &nbsp; {JSON.stringify(approveTx?.transactionHash)}
          </button>
        );
        }

        console.log('others');
        return (
          <button disabled={true}>Pending... </button>
        )
    }

    return (
      <>
        <div className='relative mb-6'>
          <label>
            <div>
              Change Allowance&nbsp;:&nbsp;
              <input type="text" placeholder="WETH"
                onChange={(e) => { setApprovalLimit(e.target.value) }}
              />
              {
                <ActionButton/>
              }
            </div>
          </label>
        </div>
      </>
    )
  }