setState не вызывается onClick

Question

Работа с material-ui v3.9.4, реакции-маршрутизатором v3. Создана левая навигационная панель со списком, содержащим элементы ссылок, для перенаправления на другую страницу. По какой-то причине, когда я нажимаю на элемент, страница перенаправляется, но состояние не обновляется до второго щелчка, чтобы показать активный элемент. Есть идеи, почему это так? Код ниже. Я консоль зарегистрировала изменение setState, которое не печатается до второго щелчка.

class LeftNavigation extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            sidebarCollapsed: false,
        }
    }

    handleListItemClick = (event, index) => {
        console.log("CLICKED");                                             //prints first click
        this.setState({ selectedIndex: index }, () => {
            console.log("SELECTED INDEX:: ", this.state.selectedIndex)      //prints second click
        });
    }

    handleCollapse = () => {
        this.setState({ sidebarCollapsed: !this.state.sidebarCollapsed })
    }

    render() {
        const { classes } = this.props;

        return (
            <div className={this.state.sidebarCollapsed ? classes.rootCollapsed : classes.root}>
                <List component="nav">
                    <ListItem
                        button
                        component={props => <Link to="./pageOne" {...props} />}
                        selected={this.state.selectedIndex === 0}
                        onClick={(event) => this.handleListItemClick(event, 0)}
                    >
                        <ListItemIcon>
                            <CalendarIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page One" />
                    </ListItem>

                    <ListItem
                        button
                        onClick={(event) => this.handleListItemClick(event, 1)}
                        component={props => <Link to="./pageTwo" {...props} />}
                        selected={this.state.selectedIndex === 1}
                    >
                        <ListItemIcon>
                            <MailIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page Two" />
                    </ListItem>

                    <ListItem
                        button
                        component={props => <Link to="./pageThree" {...props} />}
                        selected={this.state.selectedIndex === 2}
                        onClick={(event) => this.handleListItemClick(event, 2)}
                    >
                        <ListItemIcon>
                            <NotesIcon />
                        </ListItemIcon>
                        <ListItemText classes={{ primary: classes.listText }} primary="Page Three" />
                    </ListItem>
                </List>

                <div
                    onClick={this.handleCollapse}>
                    {this.state.sidebarCollapsed ? <ChevronRight /> :
                        <div><ChevronLeft /><p>Collapse sidebar</p></div>}
                </div>
            </div>
        )
    }
}

export default withStyles(styles)(LeftNavigation );