How to use map with react-bootstrap-table-next

Question

I'm trying to use add sorting and pagination to a HTML table by using react-bootstrap-table. I'm able to make it work on all fields except the last column where I need to map an array that has a link that will lead directly to each user's service order.

import BootstrapTable from "react-bootstrap-table-next"
import paginationFactory from "react-bootstrap-table2-paginator"
const OrdersPageComponent = ({getOrders}) => {

    const [orders, setOrders] = useState([])
    const dispatch = useDispatch()


    useEffect(() => {
        getOrders()
        .then((orders) => setOrders(orders))
        .catch((er) => dispatch(logout()))
    }, [])

    const  pagination = paginationFactory({
            sizePerPage: 20,
            //acá agrego todas las características que quiero de la paginación
    })

Here is my current HTML Table (map on tbody):

<Table striped bordered hover responsive>
<thead>
    <tr>
    <th>#</th>
    <th>User</th>
    <th>Date</th>
    <th>Amount</th>
    <th>Delivered</th>
    <th>Payment Method</th>
    <th>Service Order</th>
    </tr>
</thead>
<tbody>
    {orders.map((order, idx)=> (
        <tr key={idx}>
            <td>{idx + 1}</td>
            <td>
                {order.user !=null ? (
                    <>
                    {order.user.name} {order.user.lastName}
                    </>
                ) : null}                                
            </td>
            <td>{order.createdAt.substring(0,10)}</td>
            <td align="right">{parseFloat(order.orderTotal.cartSubtotal).toFixed(2)}</td>
            <td>
                {order.isDelivered ? <i className="bi bi-check-lg text-success"></i> : <i className="bi bi-x-lg text-danger"></i>}                                    
            </td>
            <td>{order.paymentMethod}</td>
            <td>
                <Link to={`/admin/order-details/${order._id}`}>Service Order</Link>
            </td>
        </tr>
    ))}
</tbody>
</Table>

And here is what I'm trying to achieve:

Table definition:

<Col  md={10}>
 <BootstrapTable
  bootstrap4
  keyField="id"
  data={orders} 
  columns={columns} 
  striped 
  bordered 
  hover 
  responsive
  pagination={pagination}
/>
</Col>
<Col>
    <Table columns={columns} data={orders} />
</Col>

Columns definition:

const columns = [ 
        {   
            dataField: 'user.name',
            text: 'Name',
            headerAlign: 'center'
        },
        {
            dataField: 'createdAt',
            text: 'Date',
            headerAlign: 'center',
            sort: true,
        },
        {
            dataField: 'isDelivered',
            text: 'Delivered',
            headerAlign: 'center',
            sort: true,
        },
        {
            dataField: 'paymentMethod',
            text: 'Payment Method',
            headerAlign: 'center',
            sort: true,
        },
        {
            dataField: 'orderTotal.cartSubtotal',
            text: 'Total',
            headerAlign: 'right',
            align: 'right',
            sort: true,
        },
        {
            text: 'Service Order',
            accessor : "link",
            ??????????? >>> Don't know how to add the map funtion to map the orders link
        },
    ]

Finally, here is a sample of the array I'm trying to map:

Array to map

This is my desired outcome

I've tried several times, however, I don't seem to find the way to add the Service order Link for each service order.