React Modal on deletion of a row in React-Bootstrap-Table-next

Question

I have been trying to implement a modal that will pop up to confirm deletion before a record is deleted in my bootstrap table. I have tried different methods but to no avail. Is there a way it can be done, I have tried creating a modal and then calling the modal in my actions button, but the delete function will have no effect outside the scope of the formatter. If bootstrap also has its own in built modal which will be easier to use, I wouldn't mind also.

useState and useEffect

 const [data, setData] = useState([]);

 useEffect(() => {
 getData();
 }, []);

     const getData = () => {
    axios(apiUrl).then(res => {
   setData(res.data);
   });
   };

dataTable const and functions

 const columns = [

  {
  dataField: 'name',
  text: 'Name',
  sort: true,
  filter: textFilter(),
  headerStyle: { backgroundColor: 'red', color: 'white' },
  },
  {
  dataField: 'databasePKey',
  text: 'Actions',
  headerStyle: { backgroundColor: 'red', color: 'white' },
  formatter: (cellContent, row) => {
    return (
      <>
        <div className="btn-group flex-btn-group-container">
        
          <Button color="body" size="sm" onClick={() =>handleDelete(row.id)}>
            <FontAwesomeIcon icon="trash" /> <span className="d-none d-md-inline"></span>
          </Button>
        </div>
      </>
     );
     },
     },
 

return jsx containing the bootstrap table

 <BootstrapTable
    keyField="id"
    data={data}
    columns={columns}
    striped
    hover
    condensed
    pagination={paginationFactory()}
    cellEdit={cellEdit}
    filter={filterFactory()}
    noDataIndication="Table is Empty"
    
  />