How to use the @reach/menu-button.MenuItem function in @reach/menu-button

svg {
      fill: ${p => p.theme.colors.primary};
    }
  }

  [disabled] & {
    opacity: 0.25;
  }
`

const MenuList = styled(ReachUI.MenuList)`
  background-color: ${p => p.theme.colors.light};
  padding: 1.6rem 0;
`

const MenuItem = styled(ReachUI.MenuItem)`
  color: ${p => p.theme.colors.copy};
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 1.2rem 1.6rem;

  &[data-selected] {
    background-color: rgba(126, 97, 248, 0.1);
    color: ${p => p.theme.colors.primary};
    outline: none;
  }
`

export default class Selector extends React.Component {
  static propTypes = {
    'data-testid': PropTypes.string,

padding: 1.6rem 1.2rem;
  `};
`

const MenuList = styled(ReachUI.MenuList)`
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.4);
  background-color: ${({ theme }) => theme.colors.dark};
  display: block;
  white-space: nowrap;
  outline: none;
  overflow: hidden;
  border-radius: 1.2rem;
  transform: translateY(-56px);
`

const MenuItem = styled(ReachUI.MenuItem)`
  background-color: ${({ theme }) => theme.colors.lightShade};
  display: block;
  cursor: pointer;
  padding: 1.6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &[data-selected] {
    background-color: ${({ theme }) => theme.colors.translucentPrimary};
    outline: none;
  }

  @media (min-width: 800px) {
    justify-content: center;
  }