How to use the react-pose.nav function in react-pose

import React, { Component } from 'react';
import debounce from 'lodash.debounce';
import { scrollIt } from 'utils/scroll';
import Logo from 'assets/images/helloroman-logo.svg';
import styled from 'styled-components';
import { media, typography } from 'utils';
import { sizes } from 'utils/media';
import posed from 'react-pose';

import Hamburger from './Hamburger';
import { zIndex, colors } from 'utils';

const MenuWrapper = posed.nav({
  open: { x: '0%', staggerChildren: 200 },
  closed: { x: '-100%' }
});

const NavItem = posed.li({
  open: { opacity: 1 },
  closed: { opacity: 0 }
});

const NavigationWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  z-index: ${zIndex.level9};
  padding: 20px;
  width: 100%;

overflow-y: auto;
  z-index: 999;
`;

const MenuTop = styled(Flex)`
  height: ${p => p.theme.headerHeight};
`;

const MenuLinks = styled(Flex)`
  width: 100%;
  height: calc(100vh - ${p => p.theme.headerHeight});
  background-color: ${p => p.theme.colors.bgAlt};
  overflow: auto;
`;

const LinkTransitionContainer = posed.nav({
  enter: { staggerChildren: 70, delay: 250, delayChildren: 250 },
});

const LinkTransition = posed.div({
  enter: { y: 24, opacity: 1 },
  exit: { y: 0, opacity: 0 },
});

const Box = styled(LinkTransitionContainer)`
  margin: auto;
  width: 100%;
`;

const MobileMenu = ({ isMobileMenuOpen, closeMobileMenu, links }) => {
  const menuRef = useRef();
  const handleKeyDown = e => {