Menu component causes warning: "Popper: CSS "margin" styles cannot be used to apply padding..."

🐛 Bug report

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the `offset` modifier, as well as the `padding` option in the `preventOverflow` and `flip` modifiers. 
    at Menu (webpack-internal:///./node_modules/@chakra-ui/menu/dist/esm/menu.js:34:5)
    at MethodMenu (webpack-internal:///./src/components/MethodMenu.tsx:29:102)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Stack (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/stack.js:54:5)
    at HStack
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Flex (webpack-internal:///./node_modules/@chakra-ui/layout/dist/esm/flex.js:25:5)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Container (webpack-internal:///./src/layout/Container.tsx:22:23)
    at div
    at Styled(div) (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:44:73)
    at Header (webpack-internal:///./src/layout/Header.tsx:65:102)
    at Layout (webpack-internal:///./src/layout/Layout.tsx:18:23)
    at Index (webpack-internal:///./pages/index.tsx:38:102)
    at WithAuthUserHOC (webpack-internal:///./node_modules/next-firebase-auth/build/index.browser.js:1:8144)
    at ColorModeProvider (webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/esm/color-mode-provider.js:46:5)
    at ThemeProvider (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js:78:71)
    at ChakraProvider (webpack-internal:///./node_modules/@chakra-ui/react/dist/esm/chakra-provider.js:21:5)
    at exports.StoreProvider (webpack-internal:///./node_modules/easy-peasy/dist/easy-peasy.js:1:16942)
    at MyApp (webpack-internal:///./pages/_app.tsx:40:24)
    at I18nProvider (webpack-internal:///./node_modules/next-translate/lib/esm/I18nProvider.js:29:18)
    at AppWithTranslations (webpack-internal:///./node_modules/next-translate/lib/esm/appWithI18n.js:66:152)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:184:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:672:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:803:24)

💥 Steps to reproduce

The warning appears when the button (MenuButton) is clicked.

Reproduction

<Menu>
    <MenuButton as={Button} rightIcon={<FaChevronDown />} color="black" colorScheme="primary">
        <Icon as={FaChair} mr={3} />
        <span>first</span>
    </MenuButton>
    <MenuList>
        <MenuOptionGroup defaultValue="first" type="radio">
            <MenuItemOption value="first">
                <Icon as={FaChair} mr={3} />
                <span>first</span>
            </MenuItemOption>
            <MenuItemOption value="second">
                <Icon as={FaChair} mr={3} />
                <span>second</span>
            </MenuItemOption>
            <MenuItemOption value="third">
                <Icon as={FaChair} mr={3} />
                <span>third</span>
            </MenuItemOption>
        </MenuOptionGroup>
    </MenuList>
</Menu>

🧐 Expected behavior

Not having a warning.

🌍 System information

Software	Version(s)
Chakra UI	^1.3.3
Browser	Chrome
Operating System	MacOS

[mindreframer]

A temporary workaround: wrap your Menu component in Box, this seems to prevent this warning

<Box>
  <Menu>
    <MenuButton as={Button} colorScheme="blue" variant="ghost" leftIcon={<AiOutlineInbox />} size="sm">
      User
    </MenuButton>
    <MenuList minWidth="240px">
      <MenuItem>Profile</MenuItem>
      <MenuItem>Logout</MenuItem>
    </MenuList>
  </Menu>
</Box>

[kasem-sm]

Still exists in v2 😕