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

opacity: 0,
    transition: { type: 'spring' }
  },
  enter: {
    y: 0,
    opacity: 1,
    transition: { type: 'spring' }
  },
  exit: {
    y: -30,
    opacity: 0,
    transition: { type: 'spring' }
  }
}

const Item = posed.li(itemProps)

// https://popmotion.io/pose/api/posegroup/
const TransitionGrid = ({ visible, items, removeItem }) => {
  return (
    
      {visible && (
        
          
            {items.map(item => (
               removeItem(item)}
              >
                <div>✕</div>
                <div>{item}</div>

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%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: ${({hasBackground}) => hasBackground ? colors.light : 'transparent'};
  transition: background-color .3s ease-out;

closed: {
    y: 20,
    opacity: 0
  },
  open: {
    y: 0,
    opacity: 1
  }
};

const Sidepanel = styled(posed.ul(sidepanelProps))`
  width: 300px;
  padding: 20px;
`;

const Item = styled(posed.li())`
  width: 100%;
  border-radius: 5px;
  height: 35px;
  background: ${color.white};
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  &[data-key='0'] {
    background: ${color.green};
  }

  &[data-key='1'] {
    background: ${color.brand};

import React from 'react'
import Link from 'gatsby-link'
import styled from 'styled-components'
import Img from 'gatsby-image'
import posed from 'react-pose'
import { appear } from '../../styles/poses'

const Wrapper = styled(posed.li(appear))`
  width: 100%;
  position: relative;
  background: ${props => props.theme.colors.tertiary};
  border-radius: 2px;
  margin: 0 0 1rem 0;
  &:hover {
    h2 {
      text-decoration: underline;
    }
  }
`

const StyledLink = styled(Link)`
  display: flex;
  flex-direction: row-reverse;
`

import * as React from 'react';
import styled from 'styled-components';
import { Incident } from '@rdrnt/tps-calls-shared';
import VisibilitySensor from 'react-visibility-sensor';
import posed from 'react-pose';

import Text from '../../Text';
import { Sizes, Colors } from '../../../config';
import { DateHelper } from '../../../helpers';

export interface DrawerListItem {
  incident: Incident;
  onClick: () => void;
}

const AnimatedContainer = posed.li({
  visible: {
    opacity: 1,
  },
  hidden: {
    opacity: 0,
  },
});

const Container = styled(AnimatedContainer)`
  height: 75px;
  width: 100%;
  background-color: ${Colors.BACKGROUND};
  padding: ${Sizes.SPACING / 2}px;
  display: flex;
  flex-direction: column;
  justify-content: center;

import React, { memo, useState, useEffect } from 'react';
import posed, { PoseGroup } from 'react-pose';
import IntlRelativeFormat from 'intl-relativeformat';
import '../../assets/style/commentsList.css';

const Ul = posed.ul({});
const Li = posed.li({
  enter: { opacity: 1 },
  exit: { opacity: 0 }
});
const rf = new IntlRelativeFormat();
let ws;

export const CommentsList = memo(() => {
  const [comments, updateComments] = useState([]);

  useEffect(() => {
    if (!ws) {
      ws = new WebSocket(`ws://${window.location.hostname}:${process.env.SERVER_PORT}`);
      ws.onmessage = ({ data }) => {
        const fetchedComments = JSON.parse(data);

        if (Array.isArray(fetchedComments) && fetchedComments.length !== 0) {

y: 20,
    opacity: 0
  },
  open: {
    y: 0,
    opacity: 1
  }
};

const Sidepanel = styled(posed.ul(sidepanelProps))`
  background: ${color.blue};
  width: 300px;
  padding: 20px;
`;

const Item = styled(posed.li(itemProps))`
  width: 100%;
  border-radius: 5px;
  height: 35px;
  background: ${color.white};
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
`;

const code = {
  react: `const Parent = posed.ul(config)
const Child = posed.li(childConfig)

({ items }) => (