JSFiddle - React, Tailwind, and code Playground

JavaScript

let userData = {
  userDebts: [
    {
      symbol: "USDC",
      id:
        "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb480xb53c1a33016b2dc2ff3653530bff1848a515c8c5",
      decimals: 6,
      reserveLiquidationBonus: "0.04",
      underlyingAsset: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
      priceInEth: "297798967828777",
      totalDebtToCover: 1763075769693,
      currentTotalDebt: "3526151539386",
      currTotalDebt: "03526151539386",
      scaledATokenBalance: "0",
      currentATokenBalance: "0",
      underlyingBalanceETH: "0",
      underlyingBalance: "0"
    },
    {
      symbol: "USDT",
      id:
        "0xdac17f958d2ee523a2206206994597c13d831ec70xb53c1a33016b2dc2ff3653530bff1848a515c8c5",
      decimals: 6,
      reserveLiquidationBonus: "-1",
      underlyingAsset: "0xdac17f958d2ee523a2206206994597c13d831ec7",
      priceInEth: "297479843939994",
      totalDebtToCover: 217180880,
      currentTotalDebt: "434361760",
      currTotalDebt: "0434361760",
      scaledATokenBalance: "0",
      currentATokenBalance: "0",
      underlyingBalanceETH: "0",
      underlyingBalance: "0"
    }
  ],
  userCollateral: [
    {
      symbol: "WBTC",
      id:
        "0x2260fac5e5542a773aa44fbcfedf7c193bc2c5990xb53c1a33016b2dc2ff3653530bff1848a515c8c5",
      decimals: 8,
      reserveLiquidationBonus: "0.065",
      underlyingAsset: "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599",
      priceInEth: "14122319520000000000",
      scaledATokenBalance: "160.93318801",
      currentATokenBalance: "16118779908",
      underlyingBalanceETH: "2276.377531474087176",
      underlyingBalance: "161.19006005"
    },
    {
      symbol: "ETH",
      id:
        "0x2260fac5e5542a773aa44fbcfedf7c193bc2c5990xb53c1a33016b2dc2ff3653530bff1848a515c8c5",
      decimals: 8,
      reserveLiquidationBonus: "0.075",
      underlyingAsset: "0x5550fac5e5542a773aa44fbcfedf7c193bc2c599",
      priceInEth: "14166619520000000000",
      scaledATokenBalance: "760.93318801",
     ...