Wagmi NextJS App is sending a transaction without a button click - reactjs

Question

I have the following NextJS App (using reactjs, ethers.js, wagmi and connectkit), that just sends Eth from one connected Metamask Wallet to another Metamask Wallet, both of which I have access to. The problem is that before clicking the send button, it is automatically sending the transaction. I did a workaround where I have a boolean (hasClicked) that stops the transaction from taking place, but it seems a bit hamfisted. I am going off of the sendTransaction found here: https://wagmi.sh/examples/send-transaction
Below is my code:
// comps/transaction.tsx
import * as React from 'react';
import { useDebounce } from 'use-debounce';
import { usePrepareSendTransaction, useSendTransaction, useWaitForTransaction } from 'wagmi'
import { utils } from 'ethers';
export function SendTransaction() {
let hasClicked = false;
const [to, setTo] = React.useState('');
const [debouncedTo] = useDebounce(to, 500);
const [amount, setAmount] = React.useState('');
const [debouncedAmount] = useDebounce(amount, 500);
const { config } = usePrepareSendTransaction({
request: {
to: to,
value: (amount && hasClicked) ? utils.parseEther(amount) : undefined,
},
});
const { data, sendTransaction } = useSendTransaction(config);
const { isLoading, isSuccess } = useWaitForTransaction({
hash: data?.hash,
});
return (
<div>
<input
aria-label="Recipient"
onChange={(e) => {
console.log("Address Set:", e.target.value);
hasClicked = false;
e.preventDefault();
setTo(e.target.value);
}}
placeholder="0xA0Cf…251e"
value={to}
/>
<input
aria-label="Amount (ether)"
onChange={(e) => {
console.log("Amount Set:", e.target.value);
e.preventDefault();
hasClicked = false;
setAmount(e.target.value);
}}
placeholder="0.05"
value={amount}
/>
<button
onClick={(e) => {
e.preventDefault();
hasClicked = true;
sendTransaction?.();
}}
disabled={isLoading}>
{isLoading ? 'Sending...' : 'Send'}
</button>
{isSuccess && (
<div>
Successfully sent {amount} ether to {to}
<div>
<a href={`https://etherscan.io/tx/${data?.hash}`}>Etherscan</a>
</div>
</div>
)}
</div>
)
}
// pages/_app.tsx
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { WagmiConfig, createClient, useAccount, useConnect, useDisconnect, goerli } from 'wagmi';
import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
import { ConnectKitProvider, getDefaultClient } from 'connectkit';
import { SendTransaction } from '../comps/transaction';
const client = createClient(
getDefaultClient({
appName: 'ConnectKit Next.js demo',
//infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
//alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID,
chains: [mainnet, polygon, optimism, arbitrum, goerli],
})
);
function MyApp({ Component, pageProps }: AppProps) {
const { isConnected } = useAccount();
const loading = (
<div>
<SendTransaction />
</div>
);
return (
<WagmiConfig client={client}>
<ConnectKitProvider>
{isConnected ? (loading) : (<Component {...pageProps} />)}
</ConnectKitProvider>
</WagmiConfig>
);
}
export default MyApp;
// pages/index.tsx
import type { NextPage } from 'next';
import { ConnectKitButton } from 'connectkit';
const Home: NextPage = () => {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
}}
>
<ConnectKitButton />
</div>
);
};
export default Home;
Again, without the hasClicked, the transaction is automatically sent.
I would also like to validate the constants "to" and "amount" before the transaction is sent, as this would be best practice, and would also like the "Send" button disabled until to and amount are validated as correct.
I am positive there must be a better way of doing this, but I am just not sure what that is.