How this is working and not returning a warning validateDOMNesting(...)?

Question

I have this problem

<Menu
  mode="horizontal"
  items={
    menuState &&
    menuState?.map((valueMenus, index) => {
      const key = index + 1;
      const items = valueMenus.menusInferiores;

      return {
        key,
        label: (
          <div>
            {valueMenus.menu} <DownOutlined />
          </div>
        ),
        children: items.map((item) => {
          return {
            label: <NavLink to={item.key}>{labelName}</NavLink>,
            key: item.key,
          };
        }),
      };
    })
  }
/>;

result of console:

but, I did a little change like this :

children: items.map((item) => {
  const labelName = item.label;
  //DONE:Cambiar la ruta quemada por la ruta que nos envian del bk
  item.label = <NavLink to={item.key}>{labelName}</NavLink>;
  return {
    label: <div>{labelName}</div>,
    key: item.key,
  };
});

no error and it's working, my question is why ?

Answer 1

you just wrraped your <NavLink/> component with a <div> this is what you did and this is working because <a> is no longer a descendant of <a> as mentioned is the error note that <NavLink/> is in fact an <a> element so instead of :

<a>
<a></a>
</a>

now you have :

<a>
<div><a></a></div>
</a>