There are a couple of issues with the above answer

1. Initially, there is a requirement for a significant amount of custom code creation when utilizing the built-in functions of '@solana/wallet-adapter', '@solana/spl-token', and '@solana/web3.js'.
2. Secondly, if the receiving account does not exist, the user may be double charged by any connected wallet. The first charge would be to create the account, followed by a second charge to transfer the spl token. Additionally, it triggers the wallet approval modal twice, which is unfavorable for the user experience.

The code below facilitates the transfer of 1 USDC (USDC being one of the sol tokens on the Solana blockchain).

import React from 'react';
import {
  WalletNotConnectedError,
  SignerWalletAdapterProps
} from '@solana/wallet-adapter-base';
import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import {
  createTransferInstruction,
  createAssociatedTokenAccountInstruction,
  getAssociatedTokenAddress,
  getAccount
} from '@solana/spl-token';
import {
  PublicKey,
  Transaction,
  Connection,
  TransactionInstruction
} from '@solana/web3.js';

export const configureAndSendCurrentTransaction = async (
  transaction: Transaction,
  connection: Connection,
  feePayer: PublicKey,
  signTransaction: SignerWalletAdapterProps['signTransaction']
) => {
  const blockHash = await connection.getLatestBlockhash();
  transaction.feePayer = feePayer;
  transaction.recentBlockhash = blockHash.blockhash;
  const signed = await signTransaction(transaction);
  const signature = await connection.sendRawTransaction(signed.serialize());
  await connection.confirmTransaction({
    blockhash: blockHash.blockhash,
    lastValidBlockHeight: blockHash.lastValidBlockHeight,
    signature
  });
  return signature;
};

const SendSolanaSplTokens: React.FC = () => {
  const { connection } = useConnection();
  const { publicKey, signTransaction } = useWallet();

  const handlePayment = async () => {
    try {
      if (!publicKey || !signTransaction) {
        throw new WalletNotConnectedError();
      }
      const mintToken = new PublicKey(
        '4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU'
      ); // 4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU is USDC token address on solana devnet
      const recipientAddress = new PublicKey(
        'token receiver solana account address'
      );

      const transactionInstructions: TransactionInstruction[] = [];
      const associatedTokenFrom = await getAssociatedTokenAddress(
        mintToken,
        publicKey
      );
      const fromAccount = await getAccount(connection, associatedTokenFrom);
      const associatedTokenTo = await getAssociatedTokenAddress(
        mintToken,
        recipientAddress
      );
      if (!(await connection.getAccountInfo(associatedTokenTo))) {
        transactionInstructions.push(
          createAssociatedTokenAccountInstruction(
            publicKey,
            associatedTokenTo,
            recipientAddress,
            mintToken
          )
        );
      }
      transactionInstructions.push(
        createTransferInstruction(
          fromAccount.address, // source
          associatedTokenTo, // dest
          publicKey,
          1000000 // transfer 1 USDC, USDC on solana devnet has 6 decimal
        )
      );
      const transaction = new Transaction().add(...transactionInstructions);
      const signature = await configureAndSendCurrentTransaction(
        transaction,
        connection,
        publicKey,
        signTransaction
      );
      // signature is transaction address, you can confirm your transaction on 'https://explorer.solana.com/?cluster=devnet'
    } catch (error) {}
  };

  return <button onClick={handlePayment}>Transfer spl token</button>;
};

export default SendSolanaSplTokens;

Learn how to generate keys, create tokens, establish token accounts for minters, mint tokens into token accounts, and transfer tokens between token accounts in this example

const splToken = require("@solana/spl-token");
const web3 = require("@solana/web3.js");

const example = async () => {
  console.log("Running Solana test");

  const cluster_url = "https://api.testnet.solana.com";

  //generate key pairs
  const mint_authority = web3.Keypair.generate();
  const freeze_authority = web3.Keypair.generate();

  const connection = new web3.Connection(cluster_url, "confirmed");

  //airdrop SOL to mint authority
  const airdropSignature = await connection.requestAirdrop(
    mint_authority.publicKey,
    web3.LAMPORTS_PER_SOL
  );

  await connection.confirmTransaction(airdropSignature);

  console.log("Mint authority public key", mint_authority.publicKey.toString());

  //check balance of mint authority
  console.log(
    "SOL balance of minter",
    await connection.getBalance(mint_authority.publicKey)
  );

  //create a new token without minting it
  const token = await splToken.Token.createMint(
    connection,
    mint_authority,
    mint_authority.publicKey,
    null,
    9,
    splToken.TOKEN_PROGRAM_ID
  );

  console.log(
    "New SOL balance of minter after token creation activity",
    await connection.getBalance(mint_authority.publicKey)
  );

  console.log("New spl token address", token.publicKey.toString());

  //mint some tokens into the mint authority wallet
  const minter_token_account = await token.getOrCreateAssociatedAccountInfo(
    mint_authority.publicKey
  );
  console.log(
    "Minter token account address",
    minter_token_account.address.toString()
  );

  console.log("Minting supply into token account created for the minter");
  console.log(
    "Minter_token_account.mint (same as token address)",
    minter_token_account.mint.toString()
  );
  console.log(
    "Minter_token_account.owner (same as pub key of token account)",
    minter_token_account.owner.toString()
  );

  // Mint the tokens - using mint_authority.publicKey as the authority
  await token.mintTo(
    minter_token_account.address,
    mint_authority.publicKey,
    [],
    10000000
  );

  //get balance of SOL for minter
  console.log(
    "New SOL balance of minter after token minting activity",
    await connection.getBalance(mint_authority.publicKey)
  );

  //retrieve token accounts by owner
  const tokenAccountsByOwner = await connection.getTokenAccountsByOwner(
    mint_authority.publicKey,
    {
      mint: token.publicKey,
    }
  );

  console.log(
    "TokenAccountsByOwner - token account address",
    tokenAccountsByOwner.value[0].pubkey.toString()
  );

  //get token account balance
  const tokenAccountBalance = await connection.getTokenAccountBalance(
    minter_token_account.address
  );
  console.log(
    "Token account balance:",
    tokenAccountBalance.value.uiAmountString
  );

  //create a new Solana address
  const bob = web3.Keypair.generate();

  console.log("Bob public address:", bob.publicKey.toString());

  console.log(
    "SOL balance of minter just before creating account for Bob",
    await connection.getBalance(mint_authority.publicKey)
  );

  //create token account for Bob's address
  const bob_token_account = await token.getOrCreateAssociatedAccountInfo(
    bob.publicKey
  );

  console.log(
    "SOL balance of minter just after creating account for Bob",
    await connection.getBalance(mint_authority.publicKey)
  ); 

  console.log(
    "Bob_token_account address",
    bob_token_account.address.toString()
  );

  console.log(
    "Bob_token_account.mint (same as token address)",
    bob_token_account.mint.toString()
  );

  console.log(
    "Bob_token_account.owner (same as pub key of token account)",
    bob_token_account.owner.toString()
  );

  //transfer from minter wallet to Bob
  var transferTrx = new web3.Transaction().add(
    splToken.Token.createTransferInstruction(
      splToken.TOKEN_PROGRAM_ID,
      minter_token_account.address,
      bob_token_account.address,
      mint_authority.publicKey,
      [],
      1
    )
  );

  let bobTokenAccountBalance = await connection.getTokenAccountBalance(
    bob_token_account.address
  );

  console.log(
    "Bob_token_account balance before transfer",
    bobTokenAccountBalance.value.uiAmountString
  );

  console.log(
    "SOL balance of minter just before transferring to Bob",
    await connection.getBalance(mint_authority.publicKey)
  );

  var signature = await web3.sendAndConfirmTransaction(
    connection,
    transferTrx,
    [mint_authority]
  );

  console.log(
    "SOL balance of minter just AFTER transferring to Bob",
    await connection.getBalance(mint_authority.publicKey)
  ); 

  bobTokenAccountBalance = await connection.getTokenAccountBalance(
    bob_token_account.address
  );

  console.log(
    "Bob_token_account balance after transfer",
    bobTokenAccountBalance.value.uiAmountString
  );
};

return example()
  .then()
  .catch((err) => {
    if (err.logs) {
      console.log(err.logs);
    } else {
      console.error(err.message);
    }
  });

This code snippet offers an alternative approach that eliminates the need to generate a custom transfer instruction. Instead, it leverages functions such as getOrCreateAssociatedTokenAccount, createAssociatedTokenAccountInstruction, getAccountInfo, and getAssociatedTokenAddress to achieve the desired functionality.

Importing spl-token is essential for creating the transfer instruction.

const fromTokenAccount = await getOrCreateAssociatedTokenAccount(
  connection,
  publicKey,
  mint,
  publicKey,
  signTransaction
)

const toTokenAccount = await getOrCreateAssociatedTokenAccount(
    connection,
    publicKey,
    mint,
    toPublicKey,
    signTransaction
)

const transaction = new web3.Transaction().add(
  Token.createTransferInstruction(
      TOKEN_PROGRAM_ID,
      fromTokenAccount.address,
      toTokenAccount.address,
      publicKey,
      [],
      1
  )
)

const signature = await sendTransaction(transaction, connection)

const response = await connection.confirmTransaction(signature, 'processed')
console.log('response', response)

Here is an alternative way to achieve the same functionality:

Function: getOrCreateAssociatedTokenAccount

import {
  ASSOCIATED_TOKEN_PROGRAM_ID,
  TOKEN_PROGRAM_ID,
  getAssociatedTokenAddress,
  getAccount,
  createAssociatedTokenAccountInstruction,
  TokenAccountNotFoundError,
  TokenInvalidAccountOwnerError,
  TokenInvalidMintError,
  TokenInvalidOwnerError,
} from '@solana/spl-token'
import { Transaction } from '@solana/web3.js'

/**
 * (rewrite)Retrieve the associated token account, or create it if it doesn't exist
 *
 * @param connection               Connection to use
 * @param payer                    Payer of the transaction and initialization fees
 * @param mint                     Mint associated with the account to set or verify
 * @param owner                    Owner of the account to set or verify
 * @param sendTransaction
 * @param allowOwnerOffCurve       Allow the owner account to be a PDA (Program Derived Address)
 * @param commitment               Desired level of commitment for querying the state
 * @param programId                SPL Token program account
 * @param associatedTokenProgramId SPL Associated Token program account
 *
 * @return Address of the new associated token account
 */
export async function getOrCreateAssociatedTokenAccount(
  connection,
  payer,
  mint,
  owner,
  sendTransaction,
  allowOwnerOffCurve = false,
  commitment,
  programId = TOKEN_PROGRAM_ID,
  associatedTokenProgramId = ASSOCIATED_TOKEN_PROGRAM_ID,
) {
  const associatedToken = await getAssociatedTokenAddress(
    mint,
    owner,
    allowOwnerOffCurve,
    programId,
    associatedTokenProgramId,
  )
  // This logic balances between fees, computations, roundtrips, and idempotency.
  let account
  try {
    account = await getAccount(connection, associatedToken, commitment, programId)
  } catch (error) {
    // Handle errors
    if (error instanceof TokenAccountNotFoundError || error instanceof TokenInvalidAccountOwnerError) {
      try {
        const transaction = new Transaction().add(
          createAssociatedTokenAccountInstruction(
            payer,
            associatedToken,
            owner,
            mint,
            programId,
            associatedTokenProgramId,
          ),
        )
        const signature = await sendTransaction(transaction, connection)

        await connection.confirmTransaction(signature)
      } catch (error) {}
     
      account = await getAccount(connection, associatedToken, commitment, programId)
    } else {
      throw error
    }
  }
  if (!account.mint.equals(mint)) throw new TokenInvalidMintError()
  if (!account.owner.equals(owner)) throw new TokenInvalidOwnerError()
  return account
}

SPL Token Transfer Function

import { Transaction, PublicKey } from '@solana/web3.js'
import { createTransferCheckedInstruction } from '@solana/spl-token'
import { useWallet, useConnection } from '@solana/wallet-adapter-react'

try {
    const { sendTransaction, publicKey } = useWallet()
    const { connection } = useConnection()

    // Step 1: Create transaction
    const toPublicKey = new PublicKey('')
    const mint = new PublicKey('token address')
    const transaction = new Transaction()
    
    // Use the rewritten function here
    const fromTokenAccount = await getOrCreateAssociatedTokenAccount(
        connection,
        publicKey,
        mint,
        publicKey,
        sendTransaction,
    )
    const toTokenAccount = await getOrCreateAssociatedTokenAccount(
        connection,
        publicKey,
        mint,
        toPublicKey,
        sendTransaction,
    )

    const instruction = createTransferCheckedInstruction(
        fromTokenAccount.address,
        mint,
        toTokenAccount.address,
        publicKey,
        1,
        0,
    )
    transaction.add(instruction)

    // Step 2: Sign & Send Transaction
    const result = await sendTransaction(transaction, connection)
} catch (err) {
    // Error handling
}

_{Transitioning OP's solution from the original question to an answer:}

I inquired about this issue on the GitHub Repository of sol-wallet-adapter and received the following response: https://github.com/solana-labs/wallet-adapter/issues/189

According to the feedback, the issue lies not with wallet-adapter but with the limitations of the Token class -- especially regarding its functionality with a wallet where the Keypair/Signer is absent.

A TypeScript version of @spl-token is currently being reviewed, which should simplify some processes, although it has yet to be officially released on NPM: solana-labs/solana-program-library#2539

The recommendation given was to verify the associated token account and manually create it within an instruction for the transaction that is signed with the wallet. These provided links from the aforementioned open PR may aid in understanding how to proceed:

https://github.com/solana-labs/solana-program-library/blob/jsx/token-ts/token/ts/src/actions/getOrCreateAssociatedTokenAccount.ts

https://github.com/solana-labs/solana-program-library/blob/jsx/token-ts/token/ts/src/state/mint.ts#L114-L129

https://github.com/solana-labs/solana-program-library/blob/jsx/token-ts/token/ts/src/instructions/transfer.ts

The matter was closed as it falls outside of the library's scope, but it is hoped that these insights prove beneficial.