How to use the @antv/x6-components.Toolbar.Item function in @antv/x6-components

render() {
    const Item = Toolbar.Item
    const Group = Toolbar.Group

    return (
      
            变更流程
            流程回滚
          
        }
      >
        
          {(this.graph.view.scale * 100).toFixed(0)}%

import React from 'react'
import { SketchPicker, ColorResult } from 'react-color'
import { Cell } from '@antv/x6'
import { Toolbar, Icon, Menu } from '@antv/x6-components'
import { fetchEditor } from '../'
import { Editor } from '../editor'

import './toolbar.less'

const Item = Toolbar.Item
const Group = Toolbar.Group

export class GraphToolbar extends React.PureComponent<
  GraphToolbar.Props,
  GraphToolbar.State
> {
  state: GraphToolbar.State = {
    scale: 1,
    editor: null,
    canUndo: false,
    canRedo: false,
    selectedCells: [],
  }

  componentDidMount() {
    fetchEditor().then(editor => {

import React from 'react'
import { message } from 'antd'
import { Toolbar, Menu } from '@antv/x6-components'

const Item = Toolbar.Item
const Group = Toolbar.Group

export default class ToolbarExample extends React.PureComponent {
  onClick = (name: string) => {
    message.success(`${name} clicked`, 10)
  }

  onItemClick = () => {
    this.onClick('undo')
  }

  renderZoomDropdown() {
    const MenuItem = Menu.Item
    const Divider = Menu.Divider

    return (