Wagmi & hooks: call multiple hooks in one button click?

Question

I have a mint function that requires ETH + some ERC20 tokens to release my contract token.

I'm trying to make all the calls in one click: send ETH, setERC20 allowance, sendERC20 (this is done by solidity contract), then mint my token to the user.. Looks like these Wagmi hooks only work inside components, so in order to use them, I need separate components, which from a UX point of view is a nightmare. One is suposed to make everything in one click. Of course I'm doing it wrong because my JS knowledge is poor.

This approve part works, but it's separated from the ETH + ERC20 send and mint part.

function ApproveButton ({
  takerAddress,
  onClick,
  sellTokenAddress,
  disabled,
}: {
  takerAddress: Address;
  onClick: () => void;
  sellTokenAddress: Address;
  disabled?: boolean;
}) {
  const { address, isConnecting, isDisconnected } = useAccount()

  const { data: allowance, refetch } = useContractRead({
    address: ERC20_ADDR,
    abi: ERC20abi,
    functionName: "allowance",
    args: [address, exchangeProxy],
  });
  console.log(allowance)

  const { config } = usePrepareContractWrite({
    address: ERC20_ADDR,
    abi: ERC20abi,
    functionName: "approve",
    args: [exchangeProxy, MAX_ALLOWANCE],
  });

  const {
    data: writeContractResult,
    writeAsync: approveAsync,
    error,
  } = useContractWrite(config);

  const { isLoading: isApproving } = useWaitForTransaction({
    hash: writeContractResult ? writeContractResult.hash : undefined,
    onSuccess(data) {
      refetch();
    }

  });

  return (
    <div>
      <button
        onClick={async () => {
          const writtenValue = await approveAsync();
        }}>
        {isApproving ? "Approving…" : "Approve"}
      </button>
    </div>
  )
}

Now I need to make the rest work and possibly merge it in one click with the approval stuff above.

//MINT MYTOKEN HOOK
const {data: d103, isLoading: l103, isSuccess: s103, write: mintMYTOKEN} = useContractWrite({
  ...mytokenContract,
  functionName: 'mintMYTOKEN',
  args: [BigInt(Qty)]
})


//SEND ETH (this should be inside a component according to Wagmi)
const { config } = usePrepareSendTransaction({
    to: 'MYTOKEN_ADDR',
    value: BigInt(100 * 1e15),
  })
  const { data, isLoading, isSuccess, isError, sendTransaction } =
    useSendTransaction(config)

...

//main function html return

//this works, but it's only the mint+erc20 call, without the ETH part. erc20 send is managed by solidity contract
<button onClick={() => mintMYTOKEN()}>Mint</button>


//this is a try to make ETH + mint together, but doesn't work
<button onClick={async () => {
  const sendEth = await sendTransaction();  //returns: "TypeError: sendTransaction is not a function"
  mintMYTOKEN();
}}>

Any help to merge all this mess in one working call? :)