Unable to output number when attempting to find element value

Question

I am having an issue outputting an expected number. Below is a html which shows a balance figure of $10.00 which I want to extract the number 10.00 from.

<div class="device sc-imAxmJ knKyAO">
   <div class="sc-iWadT hECgEh">
      <div class="device-name">testuser</div>
   </div>
   <div class="dYPvYY">
      <div class="gTgcBY">
         <div><strong>Balance</strong></div>
         <div class="balance-display">$10.00</div>
      </div>
   </div>
</div>

So what I need to do is first access the correct device based on the user (value of 'testuser' from above) and then from within there, get the balance.

So first thing I did is locate my elements and then write a method that should handle the above like so:

class page extends BasePage {

deviceName: Selector;
balance: Selector;

  constructor() {
    super();
 this.deviceName = Selector('.device-name');
 this.balance = Selector('.balance-display');
}

...

  async getIndividualBalance(location: Selector) {
    let balanceAmount = Number(
      (await location.textContent).replace('$', '')
    );
    return balanceAmount;
  }

...
}

In my test I then user the method above to locate the balance and store it within a number variable like so and I output it in a console.log():

 let initialBalance = Number(
    page.getIndividualBalance(
      page.deviceName
        .withText('testuser')
        .find(`${page.balance}`)
    )
  );

  console.log(initialBalance);

However, the console log always returns NaN and not the actual value. Am I doing something incorrect that it's not returning or formatting the number correctly.