In this question I had asked about how to collapse <SideNav> once a bullet item on it is selected.  My <SideNav> looks like this...

<SideNav hidden triggerOpening={this.props.isOpen} className="side-nav-light" breakWidth={1300}>

As you can see, I have set up my triggerOpening attribute to indicate whether my prop (in this case) of isOpen is true or false.   I have set up a callback in <SideNavLink>  like this...

<SideNavLink to="business" onClick={this.props.handleToggleClick}>Business</SideNavLink>

The callback looks like this...

handleToggleClick = () => {
  this.setState({
    isOpen: !this.state.isOpen,
  })
  console.log(this.state.isOpen)
}

In my console.log I can see that the boolean toggles from true to false or vice versa whenever I click the business bullet item.   But unfortunately, even when this.state.isOpen toggles to false, the <SideNav> does not collapse. (I do successfully navigate to the business page though.)   Can you tell me what I am missing on this...? When I do open the <SideNav> (make it visible), the rest of the screen is greyed out.  When I click on the greyed out part of the screen the <SideNav> becomes hidden -- which is the same functionality I want for the bullet.   I would like to know how to implement that functionality (of making <SideNav> hidden) into my code (my callback??) so that when I click on the business bullet item, the <SideNav> will disappear.  Thanks so much for your help.

---