Front end problem with ETH units Lesson 10

[obc92]

Hello, I have been struggling with the units visualization in my front end. This is a practise code I made to acknowledge everything but it uses the same principles as the Lesson 10.
First I call an start price of 0.02 ETH in my helper hardhatcode to initialize the variable in the constructor:

const networkConfig = {
    4: {
        name:"rinkeby",
        startPrice: ethers.utils.parseEther("0.02"),
        ethUsdPriceFeed: "0x8A753747A1Fa494EC906cE90E9f37563A8AF630e",
    },

In the deployment and testing everything works fine, even the contract deplyed in the rinkeby testnet shows the Price accordingly:

But when i call it in the frint end using the same code as the Lesson 10, whatever number I use it just deplys the last single digit of weis at the end.

Does anyone know why it shows the data like this??

This is the frontEnd code. The entranceFee is the variable that calls the getPrice function and it shows visualized in the frontend.

import { contractAddresses, abi } from "../constants"
// dont export from moralis when using react
import { useMoralis, useWeb3Contract } from "react-moralis"
import { useEffect, useState } from "react"
import { useNotification } from "web3uikit"
import { ethers } from "ethers"

export default function Codecall() {
    const { Moralis, isWeb3Enabled, chainId: chainIdHex } = useMoralis()
    // These get re-rendered every time due to our connect button!
    const chainId = parseInt(chainIdHex)
    console.log(`ChainId is ${chainId}`)
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null

    // State hooks
    // https://stackoverflow.com/questions/58252454/react-hooks-using-usestate-vs-just-variables
    const [entranceFee, setEntranceFee] = useState("0")
    const [numberOfPlayers, setNumberOfPlayers] = useState("0")
    const [recentWinner, setRecentWinner] = useState("0")

    const dispatch = useNotification()

    const {
        runContractFunction: Subscription,
        data: enterTxResponse,
        isLoading,
        isFetching,
    } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "Subscription",
        msgValue: entranceFee,
        params: {},
    }) 

    /* View Functions */

    const { runContractFunction: getInterval } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress, // specify the networkId
        functionName: "getInterval",
        params: {},
    })

    const { runContractFunction: getPrice } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getPrice",
        params: {},
    })

    const { runContractFunction: getSubscribers } = useWeb3Contract({
        abi: abi,
        contractAddress: raffleAddress,
        functionName: "getSubscribers",
        params: {},
    })

    async function updateUIValues() {
        // Another way we could make a contract call:
        // const options = { abi, contractAddress: raffleAddress } 
        // const fee = await Moralis.executeFunction({
        //     functionName: "getEntranceFee",
        //     ...options,
        // })
        const [entranceFeeFromCall, b] = (await getPrice()).toString()
        console.log(`Value: ${entranceFeeFromCall}`)
        const numPlayersFromCall = (await getSubscribers()).toString()
        const recentWinnerFromCall = (await getInterval()).toString()
        setEntranceFee(entranceFeeFromCall)
        setNumberOfPlayers(numPlayersFromCall)
        setRecentWinner(recentWinnerFromCall)
    }

    useEffect(() => {
        if (isWeb3Enabled) {
            updateUIValues()
        }
    }, [isWeb3Enabled])

    const handleNewNotification = () => {
        dispatch({
            type: "info",
            message: "Transaction Complete!",
            title: "Transaction Notification",
            position: "topR",
            icon: "bell",
        })
    }

    // Probably could add some error handling
    const handleSuccess = async (tx) => {
        await tx.wait(1)
        updateUIValues()
        handleNewNotification(tx)
    }

    return (
        <div className="p-5">
            <h1 className="py-4 px-4 font-bold text-3xl">Subscription</h1>
            {raffleAddress ? (
                <div>
                    <button
                        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-auto"
                        onClick={async () =>
                            await Subscription({
                                // onComplete:
                                // onError:
                                onSuccess: handleSuccess,
                                onError: (error) => console.log(error),
                            })
                        }
                        disabled={isLoading || isFetching}
                    >
                        {isLoading || isFetching ? (
                            <div className="animate-spin spinner-border h-8 w-8 border-b-2 rounded-full"></div>
                        ) : (
                            "Enter the subscription"//ethers.utils.formatUnits(entranceFee, "ether")
                        )}
                    </button>
                    <div>Entrance Fee: {ethers.utils.formatUnits(entranceFee, "ether")} ETH</div> // HERE!!
                    <div>The current number of players is: {numberOfPlayers}</div>
                    <div>Number is: {recentWinner}</div>
                </div>
            ) : (
                <div>Please connect to a supported chain </div>
            )}
        </div>
    )
}