Расширение и свертывание навигации при входе/выходе мыши, REACT

У меня есть панель навигации сбоку моей страницы. Я получил его через веб-сайт начальной загрузки, поэтому имена классов и т. д. Предварительно загружены. Вместо того, чтобы переключать логотип гамбургера, чтобы развернуть/свернуть навигацию, я хочу сделать это при входе/выходе мыши. Ниже приведена моя попытка: я сделал 2 обработчика как для входа, так и для выхода из мыши, и я использовал элемент проверки, поэтому перечислите имена классов для навигации, когда она развернута и свернута.

Затем я попытался дать навигации эти имена классов в зависимости от того, находится ли мышь в навигации или вне ее, но это не работает: (помогите, пожалуйста

class App extends Component {
  render() {

    let sideNav;

    const mouseEnter = e => {
      sideNav = "sideNav sidenav---sidenav---_2tBP sidenav---expanded---1KdUL";
      console.info("Mouse entered");
      return sideNav;
    }    

    const mouseLeave = e => {
      sideNav = "sidenav---sidenav---_2tBP sidenav---collapsed---LQDEv";
      console.info("mouse left");
      return sideNav;
    }

    return (
      <div className = "App container">
        <div>
          <SideNav 
            onMouseEnter = {mouseEnter} 
            onMouseLeave = {mouseLeave}
            className = {this.sideNav}
            onSelect = {(selected) => {
                // Add your code here
            }}
          >
            <SideNav.Toggle  />
            <SideNav.Nav  defaultSelected = "home">
                <NavItem eventKey = "home">
                    <NavIcon>
                        <Link to = "/"><img src = {Dash}/></Link>
                    </NavIcon>
                    <NavText>
                        <Link to = "/">Dashboard</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey = "sites">
                    <NavIcon>
                      <Link to = "/sites"><img src = {Site} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to = "/sites">Sites</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey = "tours">
                  <NavIcon>
                    <Link to = "/tours"><img src = {Tour}/></Link>
                  </NavIcon>
                  <NavText>
                      <Link to = "/tours">Tours</Link>
                  </NavText>
                </NavItem>
                <NavItem eventKey = "media">
                    <NavIcon>
                      <Link to = "/media"><img src = {Media}/> </Link>
                    </NavIcon>
                    <NavText>
                        <Link to = "/media">Media</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey = "newSite">
                    <NavIcon>
                        <Link to = "/newSite/details"><img src = {NewSite} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to = "/newSite/details">Add new Site</Link>
                    </NavText>
                </NavItem>
                <NavItem eventKey = "profile">
                    <NavIcon>
                        <Link to = "/profile"><img src = {Profile} /></Link>
                    </NavIcon>
                    <NavText>
                        <Link to = "/profile">Profile</Link>
                    </NavText>
                </NavItem>

            </SideNav.Nav>
          </SideNav>
        </div>
        <Routes />
      </div>
    );
  }
}

export default App;