I am trying to fetch api data then show it on table format. Although I am able to fetch data and store it using useState function but it is not rendering on UI. And useState function not work on 1st render. When it 1st render transcription is empty but after 2nd render it has data but it does not show on UI. I am confused what to do. I have done the same thing in my previous pages and doesn't face any issue.

import React, { useEffect, useState } from 'react'
import _ from 'lodash'
import {
  CTable,
  CTableBody,
  CTableDataCell,
  CTableHead,
  CTableHeaderCell,
  CTableRow,
} from '@coreui/react'
import axios from 'axios'
import { useParams } from 'react-router-dom'

export default function viewMeeting() {
  const { id } = useParams()
  const [transcription, setTranscripton] = useState([])
  
  useEffect(() => {
    loadUsers()
  }, [])
  
  
  const loadUsers = async() => {
    const result = await axios.get(`http://13.212.153.21:3000/meeting?meeting_id=${id}`)
    console.log(result.data.transcriptions)
    // const data = result.data.transcriptions
    setTranscripton((result.data.transcriptions).slice(0,10))
    
  }
  console.log(transcription)
  console.log(transcription[0])
  

  return (
    <div className="container">
      <div className='vh-100 w-50 bg-white'>
          <div className='text-center'>
            <p>Matrices</p>
            </div>
            <p>Emotional Score</p>
        </div>
        <div className='vh-100 w-75'>
      <CTable>
        <CTableHead color='light'>
          <CTableRow>
            <CTableHeaderCell>Speech</CTableHeaderCell>
            <CTableHeaderCell className="text-end">Emotions</CTableHeaderCell>
          </CTableRow>
        </CTableHead>
        <CTableBody>
          {transcription.map((user, index) => {
            <CTableRow v-for="item in tableItems" key={index}>
              <CTableDataCell>{user.text}</CTableDataCell>
              <CTableDataCell>{user.response}</CTableDataCell>
            </CTableRow>
          })}
        </CTableBody>
      </CTable>
    </div>
    </div>
  )
}