() => {
  // Material-UI icons are imported on a top level, before assigning them to the props.
  //import { Home, Info, SettingsApplications, Collections, ContactMail } from '@material-ui/icons'
  const items = [
    {
      name: 'Home',
      route: '/home',
      icon: Home,
    },
    {
      name: 'Services',
      route: '/services',
      icon: SettingsApplications,
    },
    {
      name: 'Projects',
      route: '/projects',
      icon: Collections,
    },
    {
      name: 'About',
      route: '/about',
      icon: Info,
    },
    {
      name: 'Contact',
      route: '/contact',
      icon: ContactMail,
    },
  ]
  const [route, setRoute] = React.useState('Hover or Click on MENU.')
  return (
    <>
      <div
        style={{
          height: '300px',
          textAlign: 'center',
          fontSize: '2em',
          color: 'teal',
        }}
      >
        "{route}"
      </div>

      <Menu items={items} handleRouting={setRoute} />
    </>
  )
}