antd menu generated dynmically from array leads to duplicated key 'undefined' used in Menu by path []

My code is pretty straightforward but leads to the following warning in the console:

index.js:1 Warning: Duplicated key 'undefined' used in Menu by path []

This is so odd since all the relevant elements do have unique keys...?!

import { useState } from 'react';
import { 
  Layout, 
  Menu
} from 'antd';
import './navigation.less';

const { Sider } = Layout;

const items = [
{
  id: 'abc',
  title: "MenuItem 1",
  navKey: 1,
  disabled: false
},
{
  id: 'def',
  title: "MenuItem 2",
  navKey: 2,
  disabled: false
},
{
  id: 'ghj',
  title: "MenuItem 3",
  navKey: 3,
  disabled: true
  },
]

const MenuItem = ({navKey, title, disabled}) => {

return (
  <Menu.Item key={navKey} disabled={disabled}>
   {title} 
  </Menu.Item>
  )
 }

 const menu = items.map((item) => <MenuItem key={item.id} {...item} />);

 const Navigation = () => {

 const [collapsed, setCollapsed] = useState(false);

 return (

   <Sider collapsible collapsed={collapsed} onCollapse={() => setCollapsed(!collapsed)} width={260}>

    <Menu theme="light" mode="inline">

      <Menu.Divider />
      {menu}
      <Menu.Divider />
     
    </Menu>
  </Sider>

);

}

export default Navigation;