Why doesn't formatEther apply to my simple code?

Question

So I have a React app and in it I need to check the balance of USDC tokens in my smart contract. For that there is a simple solution, but somehow the USDC value on display does not format (it has 12 decimals more than supposed to).

import React, {useState, useEffect} from 'react';
import { ethers } from "ethers";

const contractAddress = "0x4193f089C9e41135329c989a0899B60B101C3994"
const USDCAddress = "0x07865c6E87B9F70255377e024ace6630C1Eaa37F"

const ERC20ABI = ["function balanceOf(address _owner) public view returns (uint256 balance)"]

function App() {

const [USDCBalance, setUSDCBalance] = useState('')

async function getUSDCBalance() {

    const USDCTokenContract = await new ethers.Contract(
      USDCAddress,
      ERC20ABI,
      provider
    );

    let USDC = await USDCTokenContract.balanceOf(contractAddress)
    USDC = ethers.utils.formatEther(USDC, 6)
    setUSDCBalance(USDC)
  }

  getUSDCBalance()
    .catch(console.error);

<p>Contract USDC balance: {USDCBalance}</p>
}

export default App;

And so, the app displays "Contract USDC balance: 0.000000000001" when in reality there is a whole 1 USDC in the smart contract (on Goerli testnet).

Any ideas wth?

Answer 1

Solved. Needed to use formatUnits instead of formatEther