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

exit: {
    x: 1000,
    opacity: 0,
    delay: 800,
    staggerChildren: 50,
    transition: {
      opacity: {
        duration: animationTimings.gridLeave,
        ease: easing.linear
      },
      x: { type: 'spring' }
    }
  }
}

const Grid = posed.ul(GridProps)

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

staggerChildren: 60
  }
};

const itemProps = {
  closed: {
    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 sidepanelProps = {};

const itemProps = {
  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'] {

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, slideUp, staggerChildren } from '../../styles/poses'

const List = styled(posed.ul(staggerChildren))`
  width: 100%;
  display: inline-flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 0 -1.5rem 0;
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    padding: 1rem 0;
    margin: 0;
    flex-flow: column;
    justify-content: center;
    width: 50%;
    min-height: calc(100vh - 8rem);
  }
`

const Overflow = styled.span`

id={tag.id}
        aria-selected={tag.selected}>
      {tag.selected ?  : }
      <span>{tag.val}</span>
    
  )
}

const FilterDisplaySpan = posed.span({
  initial: {
    width: props =&gt; props.wiidth || 0,
    height: props =&gt; props.heiight,
  },
})

const ListIdBox = posed.ul({
  expanded: {
    height: "auto",
  },
  hidden: {
    height: props =&gt; props.heiight,
  },
})


export const FilterListbox = ({ tags = [], className, onFilter }) =&gt; {
  const {
    ref: listBoxRef,
    active,
    values,
    selected,
    selectIndex,

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

onClick={e => expanded && selectIndex(index, e, e.type)}
        id={tag.id}
        aria-selected={tag.selected}>
      <span>{tag.val}</span>
    
  )
}

const FilterDisplaySpan = posed.span({
  initial: {
    width: props =&gt; props.wiidth || 0,
    height: props =&gt; props.heiight,
  },
})

const ListIdBox = posed.ul({
  expanded: {
    height: "auto",
  },
  hidden: {
    height: props =&gt; props.heiight,
  },
})


/**
 *
 * @param valArr
 * @param {React.ReactElement} childComp
 * @param {'single' | 'mutli' | false} allowSelect
 * @param onPress
 * @returns {*}