I am working on a react-bootstrap-table, I set it up in a way when I click on the icon button, a modal pops up displaying the information of the row data. But when I click on another column of a row, the modal also pops up displaying data.

I want a situation whereby the modal only pops up when you click on the icon, instead of the row. This is making the cellEdit function not to be called.

        const [modalInfo, setModalInfo] = useState([])
        const [show, setShow] = useState(false);
        const [showModal, setShowModal] = useState(null);

         const rowEvents = {onClick: (e, row) => {
         setModalInfo(row);
         toggleTrueFalse();
         },
        };

        const toggleTrueFalse = () => setShowModal(handleShow);

Cell Edit

         const cellEdit = cellEditFactory({
         mode: 'click',
         blurToSave: true,})

Modal

        const ModalContent = () => {
           return (
             <>
            <Modal isOpen show={show}>
           <ModalHeader>Terminal Info</ModalHeader>
          <ModalBody>
           <ul>
          <h6 style={{ fontFamily: 'Georgia' }}>id : {modalInfo.id}</h6>
          </ul>
          </ModalBody>
          <ModalFooter>
         <Button color="secondary" onClick={handleClose}>
          <FontAwesomeIcon icon="ban" />
          &nbsp; Close
         </Button>
         </ModalFooter>
         </Modal>
           </>
        );
      };

jsx

         return (
             <>
            <div>
           <h2 style={{ color: "red", fontFamily: "Georgia" }}>Terminals</h2>
         </div>
         <BootstrapTable
          keyField="id"
          data={data}
          columns={columns}
          cellEdit={cellEdit}
          rowEvents={rowEvents}
           />
           {show ? <ModalContent /> : null}
         </>
        );
  

If I can be able to achieve this, then cellEdit will work fine.