如何在react-bootstrap-table2的边框上设置图标

import BootstrapTable from 'react-bootstrap-table-next';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const customCellStyle = (cell, row, rowIndex, colIndex) => {
  return {
    border: '1px solid #ddd',
    padding: '8px',
    position: 'relative',
  };
};

const iconStyle = {
  position: 'absolute',
  top: '50%',
  right: '8px',
  transform: 'translateY(-50%)',
  color: '#999',
};

const columns = [
  {
    dataField: 'id',
    text: 'ID',
    style: customCellStyle,
    headerStyle: customCellStyle,
  },
  {
    dataField: 'name',
    text: 'Name',
    style: customCellStyle,
    headerStyle: customCellStyle,
  },
  {
    dataField: 'actions',
    text: 'Actions',
    style: customCellStyle,
    headerStyle: customCellStyle,
    formatter: (cell, row) => (
      <div>
        <span>{cell}</span>
        <i className="fa fa-edit" style={iconStyle}></i>
      </div>
    ),
  },
];

const data = [
  { id: 1, name: 'John Doe', actions: 'Edit' },
  { id: 2, name: 'Jane Smith', actions: 'Edit' },
];

const MyTable = () => {
  return <BootstrapTable keyField='id' data={data} columns={columns} />;
};