Cant get metamask accounts balances in right way I want

Question

I 'm making a website for faucet and purchasing nft just for practice and get better at solidity and js cant get metamask accounts balance in the right way I want which is string or integer.

JS CODE

document.getElementById("log-in").addEventListener("click", async () => {
  const accounts = await window.ethereum.request({
    method: "eth_requestAccounts",
  });

  const balances = await window.ethereum.request({
    method: "eth_getBalance",
    params: [accounts[0]],
  });

  window.ethereum.on("accountsChanged", (accounts) => {
    address.innerHTML = "Address: " + accounts[0];
  });
  document.getElementById("address").innerHTML = "Address: " + accounts[0];
  document.getElementById("balance").innerHTML = "Balance: " + balances;
});

• If its 0 it shows 0x0
• But if there's balance in it
• It Shows :
  Address: -contract address-
  Balance: 0x12c12c0c0da301f1