walletconnect and wagmi

Hi,
I am an absolute noob when it comes to react or js.
But I am trying to get something running for testing.
Below is the code so far.
What I want to do now is to add two inputs and a send transaction function. But I am always running into errors that might be simple if I had some basic knowledge :D

import "@/styles/globals.css";

import * as React from 'react'
import { useDebounce } from 'use-debounce'
import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

import type { AppProps } from "next/app";
import {
  createWeb3Modal,
  defaultWagmiConfig,
} from '@web3modal/wagmi/react'
import { WagmiConfig} from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { useState } from 'react';
import { parseEther } from 'viem'

const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string;

// 2. Create wagmiConfig
const chains = [mainnet]
const wagmiConfig = defaultWagmiConfig({
  chains,
  projectId,
  metadata: {
    name: 'Web3Modal React Example'
  }
})
// 3. Create modal
createWeb3Modal({
  wagmiConfig,
  projectId,
  chains,
  themeMode: 'light',
  themeVariables: {
    '--w3m-color-mix': '#00DCFF',
    '--w3m-color-mix-strength': 20
  }
})


export default function App({ Component, pageProps }: AppProps) {
  const [to, setTo] = React.useState('');
  const [debouncedTo] = useDebounce(to, 500);
  const [amount, setAmount] = React.useState('');
  const [debouncedAmount] = useDebounce(amount, 500);


  return (
      <WagmiConfig config={wagmiConfig}>
        <w3m-button />
        <w3m-connect-button />
      </WagmiConfig>

  );}

this is want I want to add

  const { config } = usePrepareSendTransaction({
    to: debouncedTo,
    value: debouncedAmount ? parseEther(debouncedAmount) : undefined,
  });
  const { sendTransaction } = useSendTransaction(config);

these are the btn without the onclick right now

<form
        onSubmit={(e) => {
          e.preventDefault();
          sendTransaction?.();
        }}
      >
        <input
          aria-label="Recipient"
          onChange={(e) => setTo(e.target.value)}
          placeholder="0xA0Cf…251e"
          value={to}
        />
        <input
          aria-label="Amount (ether)"
          onChange={(e) => setAmount(e.target.value)}
          placeholder="0.05"
          value={amount}
        />
        <button type="submit">
          Send
        </button>
      </form>

And I am getting this error

Unhandled Runtime Error
Error: useConfig must be used within WagmiConfig.

Read more: https://wagmi.sh/react/WagmiConfig

thanks