Пульсационный переход ListItem перестает работать при изменении состояния

Question

У меня проблема с Material-UI. На видео Вы можете понять, что я имел в виду https://imgur.com/a/9hlpvAA. Когда я изменяю состояние текущей страницы, чтобы правильно навести ее на ItemList, она просто останавливает анимацию.

Вот как я генерирую главную страницу и панель навигации

          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              children={
                <>
                  <LeftNavigationBar
                    open={open}
                    handleDrawerClose={handleDrawerClose}
                    handleDrawerOpen={handleDrawerOpen}
                    currentlyOpen={index}
                    pageName={route.name}
                  />
                  <route.main />
                </>
              }
            />
          ))}

Так выглядит панель навигации

<Drawer>
    <List>
         {mainListItems({
            currentlyOpen: props.currentlyOpen,
          })}
     </List>
</Drawer>

Так выглядит mainListItems

export const mainListItems = (props: any) => {
  return [0, 1, 2, 3].map((_element, index) => (
    <Link to={() => getLink(index)}>
      <ListItem
        className="animatedListItem"
        button
        selected={props.currentlyOpen === index}
        disabled={checkIfDisabledItem(index)}
        key={index}>
        <ListItemIcon>
          <Icons index={index} />
        </ListItemIcon>
        <ListItemText primary={primaryText(index)} />
      </ListItem>
    </Link>
  ));
};

Это работает, только когда я помещаю LeftNavigationBar над картой, но тогда проблема состоит в том, чтобы получить индекс имени текущего маршрута. Я пробовал использовать это https://github.com/reactjs/react-transition-group, но это не дало никакого эффекта, или я использовал это неправильно.