How to wrap 2 or more menu items to use them in one condition, using React and ant design?

I would like to build a navbar. But in my case I need a condition to display part of menu items (login, register) if the user is not logged or a submenu if user is logged in, using the "props" value. I tried something but is not an elegant solution.

function Navbar(props) {
  const { t } = useTranslation();
  return (
    <Menu mode="horizontal">
      <Menu.Item key="createCode">
        <Link to="/create-code">{t('Add code')}</Link>
      </Menu.Item>
      {props.userData.id
        ? <SubMenu title={props.userData.id}>
            <Menu.Item key="myCodes">{t('My codes')}</Menu.Item>
            <Menu.Item key="logOut">{t('Log out')}</Menu.Item>
          </SubMenu>
        : <Menu.Item key="logIn">
            <Link to="/login">{t('Log in')}</Link>
          </Menu.Item>
      }
      {props.userData.id
        ? null
        : <Menu.Item key="register">
            <Link to="/register">{t('Register')}</Link>
          </Menu.Item>
      }
    </Menu>
  );
}

In order not to use repetitive code,I tried to wrap the 2 menu items with <div> ... </div>, <> ... </>, <React.Fragment> ... </React.Fragment> and other similar things, but without success.