Как убрать перерисовку меню после нажатия на Menu.Item в React?

Question

[Eugene Stepanyuk]

Используя antd у меня есть меню, Menu.Item'ы которого я формирую динамически, получая данные из БД (routes для перехода по страницам и их названия)

<Menu
    mode="inline"
    onOpenChange={this.onOpenChange} 
>
    {accessData?.length > 0 ? (
       <SubMenu key="sub1" title={'Docs'}>
           {accessData.map(item => (
              item.parent_route === 'docs' ?
                  <Menu.Item key={item.routeId}>
                      <Link to={item.route}>{item.name}</Link>
                  </Menu.Item> : null
            ))}
        </SubMenu>
    ) : null}
</Menu>

Данные получаю в методе и вызываю сразу после монтирования

componentDidMount() {
       this.fetchData();
    } 
   
    fetchData = async() => {
        const { type, content: access } = await insertAccess(User.decode());
        if (type === 'ok') {
           this.setState({ accessData: access });
        } else {
           this.setState({ accessData: [] });
        }
   }

По нажатию на Menu.Item происходит перерендер всего меню


Если я статически добавлю меню, то нажатия происходят без перерендера

<SubMenu key="sub1" title={'Docs'}>
             <Menu.Item key="1">
                <Link to="/cabinet">'incoming'</Link>
              </Menu.Item>
              <Menu.Item key="2">
                <Link to="/cabinet/outcoming">'outcoming'</Link>
              </Menu.Item>
              <Menu.Item key="3">
                <Link to="/cabinet/administrative">'administrative'</Link>
              </Menu.Item>
        </SubMenu>

Почему так происходит, уже перерыл кучу инфы и не пойму как решить эту проблему. Буду очень признателен за помощь