setState is not being called onClick - reactjs

Question

Working with material-ui v3.9.4, react-router v3. Created a left nav bar with a List containing Link items to redirect to another page. For some reason when I click on an item, the page is redirected, but the state is not updated until the second click to show the active item. Any idea as to why that is? Code below. I've console logged the setState change, which doesnt print until the second click.
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 );