Edit row on Edit button click in 'react-bootstrap-table-next'

Question

I am trying to implement a table using 'react-bootstrap-table-next'. I want the row to be editable only after the click of the 'edit' button. Currently, with my code on click of the cell, the cell is changed into an editable cell.

Screenshot of what I want to achieve.

My Code:

import BootstrapTable from 'react-bootstrap-table-next'
import cellEditFactory from 'react-bootstrap-table2-editor';

 const buttonFormatter = (cell, row) => {
    console.log(cell,row)
    return <Button onClick={()=>{editTenantHandler(cell,row)}}><FaEdit/></Button>;
}

  const columns = [{
    dataField: 'tenantName',
    text: 'Tenant Name',
    headerStyle: {
      color: 'white'
    }
  }, {
    dataField: 'email',
    text: 'Email',
    headerStyle: {
      color: 'white'
    }
  }, {
      dataField: 'mobile',
      text: 'Mobile',
      headerStyle: {
        color: 'white'
      }
    },
    {
      dataField: 'actions',
      text: 'Actions',
      isDummyField: true,
      csvExport: false,
      formatter: buttonFormatter,
      headerStyle: {
        color: 'white'
      }
    }];

  <BootstrapTable 
     keyField='tenantName' 
     data={ props.tenants } 
     columns={ columns } 
     cellEdit={ cellEditFactory({mode: 'click'}) }/>