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

[aria-expanded='true'] & {
    background-color: ${p => p.theme.colors.light};
    box-shadow: 0 -1px 0 0 ${p => p.theme.colors.dark} inset;

    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;
  }

&:hover {
    background-color: ${({ theme }) => theme.colors.darkShade};
    outline: none;
  }

  &[aria-expanded='true'] {
    visibility: hidden;
  }

  ${wideOrHover`
    justify-content: center;
    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;