I copied the finished component from the antd library, which includes the Menu element. An error is thrown, supposedly not found. What to do?

Question

JavaScript

The code itself

import React, { Component } from 'react';

const { Layout, Menu } = 'antd';
const { Item } = Menu;

export default class Sidebar extends Component<Props> {
  props: Props;

  render() {
    return (
      <Layout
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={broken => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="logo" />

        <Menu theme="light" mode="inline" defaultSelectedKeys={['2']}>
          <Item key="1">nav 1</Item>
          <Item key="2">nav 2</Item>
        </Menu>
      </Layout>
    );
  }
}

mistake

Uncaught TypeError: Cannot destructure property 'Item' of 'Menu' as it is undefined.
    at Module.<anonymous> (Sidebar.js:4)
    at Module../app/components/Sidebar.js (renderer.dev.js:1342)
    at __webpack_require__ (bootstrap:726)
    at fn (bootstrap:100)
    at Module.<anonymous> (renderer.dev.js:1737)
    at Module../app/containers/SidebarPage.js (renderer.dev.js:1792)
    at __webpack_require__ (bootstrap:726)
    at fn (bootstrap:100)
    at Module.<anonymous> (renderer.dev.js:1422)
    at Module../app/containers/App.js (renderer.dev.js:1495)

Answer 1

const { Layout, Menu } = 'antd';
You are pulling two object properties from a string.
Maybe so?:

import antd from 'antd'
const { Layout, Menu } = antd;