How to use the semantic-ui-react.Menu.Item function in semantic-ui-react

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
`
//
export const SidebarLogoContainer = styled.a`
  background-color: ${props => props.theme.primaryColorDark};
  padding: 25px;
  text-align: center;
  ${media.md`
    padding: 25px;
  `};
	${media.lg`
    padding: 20px;
  `};
`
// Color: ${props => props.theme.primaryColorText}!important;
export const SidebarItem = styled(Menu.Item)``
//
export const SidebarLogoutItem = SidebarItem.extend`
  cursor: pointer;
  border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
`

test('after login, navlink change', () => {
    let wrapperWithId = shallow()
    let index = 0
    wrapperWithId.find(Menu.Item).forEach(l => {
      expect(l.props().to).toMatch(authRoutes[index++])
    })
  })
})

it('renders one heading and one menu items', () => {
      const items = create().find(Menu).find(Menu.Item)
      expect(items.length).to.equal(2)
    })
    it('renders a clear widgets item', () => {

it('renders a two Menu.Items', () => {
      expect(create().find(Menu).find(Menu.Item).length).to.equal(2)
    })
  })

export const SidebarLogo = styled(Logo)`margin: 5px;`
//
export const SidebarLogoContainer = styled.a`
	background-color: ${props => props.theme.accentColor};
	color: ${props => props.theme.accentColor};
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	padding: 25px;
	text-align: center;
	${media.md`
    padding: 25px;
  `};
	${media.lg`
    padding: 20px;
  `};
`
export const SidebarItem = styled(Menu.Item)``
export const SidebarLogoutItem = styled(SidebarItem)`
	cursor: pointer;
	border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
`

import React, { PureComponent } from 'react'
import { Link } from 'dva/router'
import { connect } from 'dva'
import styled from 'styled-components'
import { Menu, Input } from 'semantic-ui-react'

const Container = styled.div`
  padding-left: 280px;
  height: 60px;
`

const StyledMenu = styled(Menu)`
  height: 100%;
`

const StyledMenuItem = styled(Menu.Item)`
  width: 80px;
  justify-content: center;
`

const StyledInput = styled(Menu.Menu)`
  width: 239px;
`

class Nav extends PureComponent {
  handleItemClick = (e, { name }) => {
    this.props.dispatch({
      type: 'appModel/switchRoute',
      payload: {
        route: name,
      },
    })

onEndpointSelection: (id: string) => void;
  onEndpointDelete: (id: string) => void;
  moveEndpoint: (fromIndex: number, toIndex: number) => void;
  openPreferenceDialog: () => void;
  save: () => void;
  deploy: () => void;
  remoteDeploy: () => void;
  closeProject: () => void;
}

const MinimalSidebar = styled(Sidebar)`
    background-color: #2d2d2d !important;
    color: gray;
`;

const SideBarItem = styled(Menu.Item)`
  background-color: #1b1b1b !important;
  border-right: ${props =>
    props.highlight
      ? "5px solid #ff6a4d !important;"
      : "5px solid #3c3c3c !important;"};
  width: ${props => (props.divide ? "50%" : "100%")};
  float: ${props => (props.float === "right" ? "right" : "")};
`;

const Logo = styled.img`
  height: 40px !important;
  margin-left: 20px !important;
  width: 183px !important;
`;

function displayUrl(url: string) {

const generateItems = () => [
    { Component: Menu.Item, props: { expectedProps: 'firstExpectedProps' }, children: 'firstExpectedChildren' },
    { Component: Menu.Item, props: { expectedProps: 'secondExpectedProps' }, children: 'secondExpectedChildren' },
    { Component: NavLink, props: { to: '/', expectedProps: 'thirdExpectedProps' }, children: 'thirdExpectedChildren' },
    { Component: NavLink, props: { to: '/', expectedProps: 'fourthExpectedProps' }, chilren: 'fourthExpectedChildren' },
  ];

renderItems(mappedTabs) {
    const { renderTab, dropdown } = this.props;
    const ItemComp = dropdown ? Dropdown.Item : Menu.Item;
    return mappedTabs.map(({ hidden, exact, icon, key, content, active, as, to, onClick, disabled, props }) => {
      if (hidden) { return null; }
      if (renderTab) { return renderTab({ exact, icon, key, content, active, as, to, onClick, disabled, ...props }); }
      return ;
    });
  }
  render() {