老师,为什么我的数据不能渲染到页面上,如图,也没有老师视频中出现的<Icon type={item.icon} />代码,是版本的问题吗?

相关代码：folder: Header, -> index.js

​//JS
import React, { Component, Fragment } from 'react';
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

//CSS
import "./style.css"
//IMG
import logo from "./logo.png";

class AppHeader extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{
id: 1,
icon: "mail",
title: "VOA慢速英语"
},
{
id: 2,
icon: "mail",
title: "VOA慢速英语"
},
{
id: 3,
icon: "mail",
title: "VOA慢速英语"
},
{
id: 4,
icon: "mail",
title: "VOA慢速英语"
},
{
id: 5,
icon: "mail",
title: "VOA慢速英语"
},
{
id: 6,
icon: "mail",
title: "VOA慢速英语"
},
]
}
}
getMenuItems() {
this.state.list.map(item => {
console.log(item);
return (
<Menu.Item key={item.id} icon={<MailOutlined />}>
{item.title}
</Menu.Item>
)
})

}
render() {
return (
<Fragment>
<img src={logo} className="app-header-logo" />
<Menu mode="horizontal">
{this.getMenuItems()}
</Menu>
</Fragment>




);
}
}

export default AppHeader;