Fund transfer from Metamask account to another account

Metamask.jsx

import { useState } from "react";
import { ethers } from "ethers";

export default function Metamask() {
  const [myAddress, setMyAddress] = useState("");
  const [toAddress, setToAddress] = useState();
  const [amount, setAmount] = useState();
  const [currency, setCurrency] = useState("USD");

  const getExchangeRate = async () => {
    const response = await fetch("https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD"),
      data = await response.json();
    return data.USD;
  };

  const getAccount = async () => {
    const accounts = await ethereum.request({ method: "eth_requestAccounts" });
    const account = accounts[0];
    console.log(account);
    setMyAddress(account);
  };

  const sendTransaction = async () => {
    let tx_amount = amount;
    if (currency == "USD") {
      const exchangeRate = await getExchangeRate();
      tx_amount = parseFloat(amount) / exchangeRate;
    }
    console.log("Amount: " + tx_amount);
    let value;
    try {
      value = ethers.utils.parseEther("" + tx_amount);
    } catch (e) {
      // failed to parseEther, try something else
      value = ethers.utils.parseEther("" + parseFloat(tx_amount).toFixed(8));
    }
    const tx = {
      from: myAddress,
      to: toAddress,
      value: value._hex,
    };
    console.log(tx);
    const result = await ethereum.request({ method: "eth_sendTransaction", params: [tx] });
    console.log(result);
  };

  const style = {
    label: {
      fontSize: "1.1rem",
      fontWeight: "bold",
      color: "#000",
      marginBottom: "0.5rem",
      marginTop: "0.5rem",
      display: "block",
      textAlign: "center",
    },
    input: {
      fontSize: "1.1rem",
      fontWeight: "bold",
      color: "#000",
      marginBottom: "0.5rem",
      marginTop: "0.5rem",
      display: "block",
      textAlign: "center",
      width: "100%",
    },
    button: {
      fontSize: "1.1rem",
      fontWeight: "bold",
      color: "#000",
      marginBottom: "0.5rem",
      marginTop: "0.5rem",
      display: "block",
      textAlign: "center",
      width: "100%",
    },
    select: {
      fontSize: "1.1rem",
      fontWeight: "bold",
      color: "#000",
      marginBottom: "0.5rem",
      marginTop: "0.5rem",
      display: "block",
      textAlign: "center",
      width: "100%",
    },
    grid: {
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
      gridGap: "1rem",
      margin: "2rem",
      alignItems: "center",
      alignContent: "center",
    },
  };

  return (
    <div>
      <div style={style.grid}>
        <label htmlFor="address" style={style.label}>
          Address:
        </label>
        <input name="myAddress" value={myAddress} placeholder="My Address" style={style.input} />
        <label htmlFor="address" style={style.label}>
          To Address:
        </label>
        <input
          name="toAddress"
          value={toAddress}
          onChange={e => setToAddress(e.target.value)}
          placeholder="To Address"
          style={style.input}
        />
        <label htmlFor="amount" style={style.label}>
          Amount:
        </label>
        <input
          name="amount"
          value={amount}
          onChange={e => setAmount(e.target.value)}
          placeholder="Amount"
          style={style.input}
          type="number"
        />
        <label htmlFor="currency" style={style.label}>
          Currency:
        </label>
        <select name="currency" onChange={e => setCurrency(e.target.value)} value={currency} style={style.select}>
          <option value="USD">$ USD</option>
          <option value="ETH">Ξ ETH</option>
        </select>
        <button
          style={style.button}
          onClick={() => {
            getAccount();
          }}
        >
          Meta
        </button>
        <button
          style={style.button}
          onClick={() => {
            sendTransaction();
          }}
        >
          Send
        </button>
      </div>
    </div>
  );
}