I want to fetch the username of those people who order under the user ID. Is it possible to grab the owner of the id and render it to the UI using userId? instead of rendering the actual userId. It came from different schema in database,

import React, { useEffect, useState } from 'react'
import { format } from 'timeago.js'
import { userRequest } from '../../requestMethod'
import './Widgetlg.css'
const WidgetLg = () => {
  const Button = ({ type }) => {
    return <button className={'widgetLgButton ' + type}>{type}</button>
  }
  const [orders, setOrders] = useState([])
  


  useEffect(() => {
    const getOrders = async () => {
      //this is just a shorcut api
      try {
        const res = await userRequest.get('orders')
        setOrders(res.data)
        console.log(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    getOrders()
  }, [])
  return (
    <div className="widgetLg">
      <h3 className="widgetLgTitle">Latest Transactions</h3>
      <table className="widgetTable">
        <tr className="widgetLgTr">
          <th className="widgetLgTh">Customer</th>
          <th className="widgetLgTh">Date</th>
          <th className="widgetLgTh">Amount</th>
          <th className="widgetLgTh">Status</th>
        </tr>
        {orders.map((order) => (
          <tr className="widgetLgTr">
            <td className="widgetLgUser">
              <span className="WidgetLgName"> {order.userId} </span>
            </td>
            <td className="widgetLgDate"> {format(order.createdAt)} </td>
            <td className="widgetLgAmmount">P {order.amount} </td>
            <td className="widgetLgStatus">
              <Button type={order.status} />
            </td>
          </tr>
        ))}
      </table>
    </div>
  )
}

export default WidgetLg

How can I fetch and render the owner of the given userId?

UI