<Menu.Item> together with content field causing larger tabs

[basickarl]

Bug Report

Steps

Following results in smaller tabs:

  {
    menuItem: <Menu.Item>one</Menu.Item>,
    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
  },

However when I change the code to the following the tabs get bigger:

  {
    menuItem: {
      key: "one-menu-item",
      content: <Menu.Item>one</Menu.Item>,
      disabled: false
    },
    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
  },

This only seems to happen when <Menu.Item> is used in the content field.

The following does not increase the tab size:

    menuItem: {
      key: "one-menu-item",
      content: <div>x</div>,
      disabled: false
    },

Expected Result

I expect nothing to change UI wise (I expect the tabs to not change style at all).

Actual Result

The tab sizes increase.

Version

0.87.1

Testcase

Small tab example: https://codesandbox.io/s/5tci3

Large tab example: https://codesandbox.io/s/5ko7t

[YaseenYo]

Its not as simple as I thought