Why is the ag-grid checkbox behaving like this

I am using ag-grid checkbox selection with angular 6 to show some data in the popup.So it makes sense that the row gets selected on clicking the checkbox .However in my case , simply clicking on a column value is also causing the checkbox to be selected .The following is a screenshot of my problem.Image of my issue

The html code that i am using for my ag-grid is given below

<ag-grid-angular
    style="width:400px;height:274px" 
    class="ag-theme-blue"
    [rowData]="obj"
    [columnDefs]="ColumnDefs"
    [enableSorting]="true"
    [enableFilter]="true"
    [rowSelection]="row"
    (rowSelected)="onRowSelected($event)"

    [rowMultiSelectWithClick]="true"
    (gridReady)="onGridReady($event)"


    [enableColResize]="true"


    >

    </ag-grid-angular>

my grid definition is give below , which i have initialized in ngOnInit function.

this.ColumnDefs=[ {"checkboxSelection":true,"headerName":"Intf","field":"outboundName",sortingOrder: ['asc','desc', 'null'],width:90,cellStyle:{'text-align': "left"}},
{"headerName":"Comp","field":"success_no",sortingOrder: ['asc','desc', 'null'],width:75,cellStyle:{'text-align': "left"}},
{"headerName":"Fail","field":"fail_no",sortingOrder: ['asc','desc', 'null'],width:75,cellStyle:{'text-align': "left"}},
{"headerName":"Exec","field":"running_no",sortingOrder: ['asc','desc', 'null'],width:75,cellStyle:{'text-align': "left"}},

{"headerName":"Total","field":"total",sortingOrder: ['asc','desc', 'null'],width:75,cellStyle:{'text-align': "left"}}]

So please help me in understanding what's happening?