onClick is not triggered when using custom rendering ( Cell ) with native event listener on document.

[jogoool]

I have a side menu that will close when I clicked any area of the document ( adding addEventListener to the document). now I face a problem with clicking the value of the cell, the onClick is not working with the Cell (custom rendering), even when I use getProps or getTdProps, I tried e.stopPropagation() and e.nativeEvent.stopImmediatePropagation(), unfortunately it was unsuccessful.
in the normal rendering of the column when I clicked the value of cell the onClick event is triggering but when I use custom cell rendering (using Cell ) the onClick event is not triggering.

const columns = [
    {
      Header: 'Date',
      accessor: 'date'  
    },
   {
     id: 'actionDelet',
     width: 25,
     maxWait: 25,
     filterable: false,
     Cell: props => (<i className="simple-icon-minus" {...props} />),
  }
....
render(
 ....
 <ReactTable
                className='-highlight'
                data={tableData}
                columns={columns}
                defaultPageSize={10}
                filterable={true}
                showPageJump={true}
                PaginationComponent={DataTablePagination}
                showPageSizeOptions={true}
                getTdProps={(state, rowInfo, column, instance) => {
                    return {
                        onClick: (e) => {
                            console.log(e);
                            e.nativeEvent.stopImmediatePropagation();
                        },
                        style: {
                            cursor: 'pointer'
                        },
                    }
                }}
            />
...

• when clicking on icon the event is not triggered but when clicking outside of icon the blue area click event is triggered.