Table row doesn't show that it is selected (checkbox getting checked) even if it actually get's selected

Question

I am having a material ui Table view in my react component. I am trying to use redux with it. When I click the any row, I call a function handleCellClick which then executes this.props.tagSelected(row) where tagSelected is my action. Everything works fine but the only problem is when I am using this.props.tagSelected(row), the row doesn't gets darks and checkbox doesn't getts checked, but the click event is executed properly. When I comment out the this.props.tagSelected(row) then the row gets back to it's normal behavior i.e. it gets dark when clicked. Here is my code.

class TagDetailTable extends Component {
    handleButtonClick() {
        browserHistory.push("TagList")
    }

    handleCellClick(row,column,event){
        console.log(row);
        this.props.tagSelected(row);
    }

    render(){
        return (
            <MuiThemeProvider>
            <div>
                <Table onCellClick={this.handleCellClick.bind(this)}>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderColumn>ID</TableHeaderColumn>
                            <TableHeaderColumn>Type</TableHeaderColumn>
                            <TableHeaderColumn>Category</TableHeaderColumn>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowColumn>1</TableRowColumn>
                            <TableRowColumn>Cigarette</TableRowColumn>
                            <TableRowColumn>Compliance</TableRowColumn>
                        </TableRow>
                        <TableRow >
                            <TableRowColumn>2</TableRowColumn>
                            <TableRowColumn>Cigarette</TableRowColumn>
                            <TableRowColumn>Compliance</TableRowColumn>
                        </TableRow>
                        <TableRow >
                            <TableRowColumn>3</TableRowColumn>
                            <TableRowColumn>Cigarette</TableRowColumn>
                            <TableRowColumn>Compliance</TableRowColumn>
                        </TableRow>
                        <TableRow >
                            <TableRowColumn>4</TableRowColumn>
                            <TableRowColumn>Alcohol</TableRowColumn>
                            <TableRowColumn>Compliance</TableRowColumn>
                        </TableRow>
                        <TableRow >
                            <TableRowColumn>5</TableRowColumn>
                            <TableRowColumn>Alcohol</TableRowColumn>
                            <TableRowColumn>Compliance</TableRowColumn>
                        </TableRow>

                    </TableBody>
                </Table>
                <div className="backButton">
                    <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick}
                                  labelColor="white">

                    </RaisedButton>
                </div>
            </div>
            </MuiThemeProvider>

        );
    }
}
const mapStateToProps =(state) =>{
    return {
        tags: state.tagReducer
    };
};

function matchDispatchToProps(dispatch){
    return bindActionCreators({tagSelected: tagSelected}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(TagDetailTable);