How to use the @polkadot/util.formatNumber function in @polkadot/util

export default function BestNumber ({ children, className, label, style }: Props): React.ReactElement {
  const { api, isApiReady } = useApi();
  const bestNumber = useCall(isApiReady ? api.derive.chain.bestNumber as any : undefined, []);

  return (
    <div style="{style}">
      {label || ''}{
        bestNumber
          ? formatNumber(bestNumber)
          : '-'
      }{children}
    </div>
  );
}

const publicPropCount = useCall(api.query.democracy.publicPropCount, []);
  const referendumCount = useCall(api.query.democracy.referendumCount, []);

  return (
    
      <section>
        
          {formatNumber(activeProposals?.length)}
        
        
          {formatNumber(publicPropCount)}
        
      </section>
      <section>
        
          {formatNumber((referendumCount || ZERO).sub(nextActive || ZERO))}
        
        
          {formatNumber(referendumCount)}
        
      </section>
      {bestNumber &amp;&amp; (
        <section>
          
        </section>
      )}

<details>
          <summary>{
            meta &amp;&amp; meta.documentation
              ? meta.documentation.join(' ')
              : t('Details')
          }</summary>
          
        </details>
        {
          extrinsic.isSigned
            ? 
            : null
        }

export default function BestFinalized ({ children, className, label, style }: Props): React.ReactElement {
  const { api } = useApi();
  const bestNumberFinalized = useCall(api.derive.chain.bestNumberFinalized as any, []);

  return (
    <div style="{style}">
      {label || ''}{
        bestNumberFinalized
          ? formatNumber(bestNumberFinalized)
          : '-'
      }{children}
    </div>
  );
}

)
            : {t('other stake')}} value={stakeOther}> ({formatNumber(nominators.length)}) 
        )}
      
      {!isExpanded && (
        <>
          
            {(commission || validatorPayment) && (
              commission
                ? &lt;&gt;<label>{t('commission')}</label>{commission}
                : {t('commission')}} value={validatorPayment} /&gt;
            )}
          
          
            {points &amp;&amp; points.gtn(0) &amp;&amp; (
              &lt;&gt;<label>{t('points')}</label>{formatNumber(points)}
            )}
          
          
            {lastBlockNumber &amp;&amp; &lt;&gt;<label>{t('last #')}</label>{lastBlockNumber}}
          
          
            {hasQueries &amp;&amp; api.query.imOnline?.authoredBlocks &amp;&amp; (
              
            )}
          
        
      )}

return (
    
      <section>
        
          {formatNumber(activeProposals?.length)}
        
        
          {formatNumber(publicPropCount)}
        
      </section>
      <section>
        
          {formatNumber((referendumCount || ZERO).sub(nextActive || ZERO))}
        
        
          {formatNumber(referendumCount)}
        
      </section>
      {bestNumber &amp;&amp; (
        <section>
          
        </section>
      )}
    
  );
}

<span><b>Reserved:</b>{reservedBalance &amp;&amp; {formatBalance(reservedBalance)}}</span>
        <span><b>Locked:</b>{lockedBalance &amp;&amp; {formatBalance(lockedBalance)}}</span>
        {renderUnlocking()}
      
    );
  };

  return (
    
      {allBalances
        ? 
          
            <strong>Total Balance:</strong> {allBalances.freeBalance &amp;&amp; formatBalance(allBalances.freeBalance)}
          
          Transactions: {formatNumber(allBalances.accountNonce)} 
        
        : 
      }
      {
        detailed &amp;&amp;
        allBalances &amp;&amp;
        renderDetailedBalances()
      }
    
  );
}

function ProposalDisplay ({ className, proposal: { council, id, proposal }, t }: Props): React.ReactElement | null {
  return (
    
      
        <h1>{formatNumber(id)}</h1>
      
      
        
      
      
        {t('bond')}}
          value={proposal.bond}
        /&gt;
      
      
        {t('beneficiary')}}
          value={proposal.beneficiary}
        /&gt;

function Motion ({ className, motion: { hash, proposal, votes }, t }: Props): React.ReactElement | null {
  if (!votes) {
    return null;
  }

  const { ayes, index, nays, threshold } = votes;

  return (
    
      <h1>{formatNumber(index)}</h1>
      
      
        <label>{t('threshold')}</label>
        {formatNumber(ayes.length)}/{formatNumber(threshold)}
      
      
        {ayes.map((address, index): React.ReactNode =&gt; (

function renderExtended ({ balancesAll, t, address, withExtended }: Props): React.ReactNode {
  const extendedDisplay = withExtended === true
    ? DEFAULT_EXTENDED
    : withExtended || undefined;

  if (!extendedDisplay) {
    return null;
  }

  return (
    <div>
      {balancesAll &amp;&amp; extendedDisplay.nonce &amp;&amp; (
        &lt;&gt;
          <label label="{t('transactions')}">
          <div>{formatNumber(balancesAll.accountNonce)}</div>
        
      )}
      {extendedDisplay.crypto &amp;&amp; (
        &lt;&gt;
          <label label="{t('type')}">
          
        
      )}
    </label></label></div>
  );
}