I'm using innerhtmal for output but the problem is it shows 1 less value the array I cant find the problem.

await fetch(urlbody, bodyrequestOptions)
  .then((response) => response.json())
  .then((payload) => {
      console.log(payload)

      payload.map(({
        TRANS_NO,
        TRANS_DATE,
        DR_AMT,
        CR_AMT,
        PARTICULAR
      }, index) => {
        /* Calculatation*/
        oprningbalance += CR_AMT
        oprningbalance -= DR_AMT

        document.getElementById('output2').innerHTML += `<tr>
          <td>${index + 1}</td>
          <td class="text-tiny text-break">${moment(TRANS_DATE).format('LLL')}</td>
          <td class="text-tiny">${TRANS_NO}</td>
          <td class="text-tiny">${DR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${CR_AMT.toFixed(2)}</td>
          <td class="text-tiny">${oprningbalance.toFixed(2)}</td>
          <td class="text-tiny text-break">${PARTICULAR}</td>
        </tr>`
        total_dr += DR_AMT
        total_cr += CR_AMT
      })