How to remove menu redraw after clicking on Menu.Item in React?

Question

React

Using antd I have a menu whose Menu.Items I form dynamically, getting data from the database (routes for navigating pages and their names)

<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>

I get the data in the method and call it immediately after mounting

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

By clicking on Menu.Item, the entire menu is re-rendered


If I statically add a menu, then clicks occur without re-rendering

<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>

Why this is happening, I have already rummaged through a bunch of information and I don’t understand how to solve this problem. I would be very grateful for help