React JS Material-UI Table Checkbox and Row

I want to differentiate between a checkbox click and a row click. For example I want this behaviour, when I click the checkbox, only the checkbox is checked and when I click the row, only the row is selected but the checkbox is not selected. How can I achieve this?

Below is my code

handleClick = (row) => {
var self = this;
var currentlist = self.state.routelist;

let newarray = [...this.state.routelist];

if (newarray[row].isselected === true) {
  newarray[row].isselected = false;
} else if (newarray[row].isselected === false) {
  newarray[row].isselected = true;
}

self.setstate({ routelist: newarray });

if (!isnan(row)) 
{
    var pos = 
    {
      routeid: currentlist[row].routeid,
      isvisible: currentlist[row].isselected
    };

    var param = {
      receiver: "event_map",
      command: "show_route",
      data: pos
    };

    //console.log("show_route: " + param.data.routeid + " visible: " + param.data.isvisible);
    this.msgdispatcher.triggermessagedispatcher(param);

    //zoom to route
    if (currentlist[row].routeid != null ||currentlist[row].routeid != undefined) 
    {
      var param = {
        receiver: "event_map",
        command: "zoom_to_route",
        data: currentlist[row].routeid
      };

      //console.log("zoom_to_route: routeid=" + param.data);
      this.msgdispatcher.triggermessagedispatcher(param);
    }
}
}

And here is the render method

render() {
return (
  <div style=>
    <div style=>
    <Table  
        onCellClick={this.handleClick}
        height={window.innerHeight}
        multiSelectable={this.state.multiSelectable}
        selectable={this.state.selectable}
      >
        <TableBody 
          displayRowCheckbox={this.state.displayRowCheckbox}
          showRowHover={this.state.showRowHover}
          deselectOnClickaway={this.state.deselectOnClickaway}
          >
          {this.state.routeList.map((row, index) => (
            <TableRow
              key={index}
              style=
              selected={this.state.routeList[index].isSelected}
            >
              <TableRowColumn style=>
                <ListItem
                  style=
                  primaryText={row.Description}
                  secondaryText={
                    <div>
                      <div>
                        {"Direction : " + row.EntryDirection + " > " + row.ExitDirection}
                      </div>
                      <div>{"Distance (meter) : " + row.Distance}</div>
                    </div>
                  }
                  secondaryTextLines={5}
                />
              </TableRowColumn>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <hr />
    </div>
  </div>
);
}