🐛 Menu causes react error: Warning: A props object containing a "key" prop is being spread into JSX:

[Suhaibinator]

The following error is thrown when a basic menu is used (the exact menu copied and pasted from the example in fact)

Describe the bug

index.tsx:86 Warning: A props object containing a "key" prop is being spread into JSX: let props = {key: someKey, id: ..., item: ..., ref: ..., children: ...}; <ForwardRef {...props} /> React keys must be passed directly to JSX without using spread: let props = {id: ..., item: ..., ref: ..., children: ...}; <ForwardRef key={someKey} {...props} /> at InnerMenu (http://localhost:3000/static/js/bundle.js:20879:21) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at BreakpointProvider (http://localhost:3000/static/js/bundle.js:27647:3) at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:28549:7) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at InnerTransition (http://localhost:3000/static/js/bundle.js:32531:7) at InnerOverlay (http://localhost:3000/static/js/bundle.js:22401:7) at InnerMenuTrigger (http://localhost:3000/static/js/bundle.js:21366:102) at div at http://localhost:3000/static/js/bundle.js:13419:81 at InnerBox (http://localhost:3000/static/js/bundle.js:7610:122) at InnerFlex (http://localhost:3000/static/js/bundle.js:19134:93)

Steps to reproduce

Simply trying to render the following causes the error
<Flex> <MenuTrigger> <IconButton variant="secondary" aria-label="View tasks"> <VerticalDotsMajorIcon /> </IconButton> <Menu> <Item key="launch">Launch...</Item> <Item key="eject">Eject...</Item> <Item key="land">Land...</Item> <Item key="help">Help</Item> <Item key="exit">Exit</Item> </Menu> </MenuTrigger> </Flex>

Expected results

No console warning

Reproducible demo

Simply using this will cause the error:

<Flex> <MenuTrigger> <IconButton variant="secondary" aria-label="View tasks"> <VerticalDotsMajorIcon /> </IconButton> <Menu> <Item key="launch">Launch...</Item> <Item key="eject">Eject...</Item> <Item key="land">Land...</Item> <Item key="help">Help</Item> <Item key="exit">Exit</Item> </Menu> </MenuTrigger> </Flex>