I ask for help, I do not understand myself whether it is really possible to pull this off, the question is probably stupid for someone. I marked it in the code with comments, I would be grateful if you would give the question a little of your time, thank you.

let thelamports = useState(0);/// how to get the value from here connection.getBalance
let theWallet = "9m5kFDqgpf7Ckzbox91RYcADqcmvxW4MmuNvroD5H2r9"
function getWallet(){

    
}

const Content: FC = () => {
    let [lamports, setLamports] = useState(0);
    let [wallet, setWallet] = useState("9m5kFDqgpf7Ckzbox91RYcADqcmvxW4MmuNvroD5H2r9");

  
    

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

    const onClick = useCallback( async () => {

        if (!publicKey) throw new WalletNotConnectedError();
        connection.getBalance(publicKey).then((bal) => {
            console.log(bal);// the value I need is output to the console, how to send this value to "thelamports"

        });

        console.log(publicKey.toBase58());
        console.log("lamports sending: {}", thelamports)
        const transaction = new Transaction().add(
            SystemProgram.transfer({

                fromPubkey: publicKey,
                toPubkey: new PublicKey(theWallet),
                lamports: thelamports,
            })
        );

        const signature = await sendTransaction(transaction, connection);

        await connection.confirmTransaction(signature, 'processed');
    }, [publicKey, sendTransaction, connection]);