How to get getter value in functions other than JSX

Question

I'm using watermelondb for local storage in react js. there are multiple columns which i can access directly but one colum role_id i don't want to fetch it as role_id i want to convert it into role. for which in model of watermelon db i am use get() which is converting role_id into string of role name

model/Staff.js

import { Model } from '@nozbe/watermelondb';
import { field, date } from '@nozbe/watermelondb/decorators';
import moment from 'moment';
// import { children, readonly, lazy } from '@nozbe/watermelondb/decorators';
import { FormattedMessage } from 'react-intl';
export default class Staff extends Model {
  static table = 'staff';

  @field('role_id') role_id;

  @date('created_at') _created_at;

  get created_at() {
    return moment(this._created_at).format('DD-MM-YYYY HH:mm:ss');
  }

  get role() {
    let role = '';
    switch (this.role_id) {
      case 1:
        role = (
          <FormattedMessage
            id="agent"
            values={{
              name: 'agent'
            }}
          />
        );
        break;
      case 2:
        role = (
          <FormattedMessage
            id="ranch_owner"
            values={{
              name: 'ranch_owner'
            }}
          />
        );
        break;
      case 3:
        role = (
          <FormattedMessage
            id="worker"
            values={{
              name: 'worker'
            }}
          />
        );
        break;
      case 4:
        role = (
          <FormattedMessage
            id="right_hand_man"
            values={{
              name: 'right_hand_man'
            }}
          />
        );
        break;
      case 5:
        role = (
          <FormattedMessage
            id="independent_contractor"
            values={{
              name: 'independent_contractor'
            }}
          />
        );
        break;
      case 6:
        role = (
          <FormattedMessage
            id="packaging_company"
            values={{
              name: 'packaging_company'
            }}
          />
        );
        break;
      case 7:
        role = (
          <FormattedMessage
            id="cutting_company"
            values={{
              name: 'cutting_company'
            }}
          />
        );
        break;
      case 8:
        role = (
          <FormattedMessage
            id="supervisor"
            values={{
              name: 'supervisor'
            }}
          />
        );
        break;
      case 9:
        role = (
          <FormattedMessage
            id="gang_boss"
            values={{
              name: 'gang_boss'
            }}
          />
        );
        break;

      case 10:
        role = (
          <FormattedMessage
            id="driver"
            values={{
              name: 'driver'
            }}
          />
        );
        break;
      case 11:
        role = (
          <FormattedMessage
            id="truck_assigner"
            values={{
              name: 'truck_assigner'
            }}
          />
        );
        break;
      case 12:
        role = (
          <FormattedMessage
            id="company_worker"
            values={{
              name: 'company_worker'
            }}
          />
        );
        break;

      default:
        role = (
          <FormattedMessage
            id="admin"
            values={{
              name: 'admin'
            }}
          />
        );
    }

    return role;
  }

}

then in react component i am trying to get role for jsx inside map() which is working fine

  {stableSort(rows, getComparator(order, orderBy)).map((row, index) => {
                /** make sure no display bugs if row isn't an OrderData object */
                if (typeof row === 'number') return null;
                const isItemSelected = isSelected(row.name);
                const labelId = `enhanced-table-checkbox-${index}`;
                return (
                  <TableRow
                    hover
                    onClick={(event) => handleClick(event, row.name)}
                    role="checkbox"
                    aria-checked={isItemSelected}
                    tabIndex={-1}
                    key={row.id}
                    selected={isItemSelected}
                  >
                  
                    <TableCell align="right">{row.social_security_number}</TableCell>
                    <TableCell sx={{ pr: 3 }} align="right">
                      {row.role}
                    </TableCell>
                  </TableRow>
                );
              })}

But when i try to get it in function can not get it

const newData = data?.map((element) => {
    console.log(element.role);
  });

here it returns object instead of string which is available in jsx