ReactJs DropDown Menu, увеличение и уменьшение высоты анимации

Question

Здравствуйте, у меня есть следующая цель, я пытаюсь создать эффект увеличения высоты и обратный эффект с ключевыми кадрами:

вот так:

и до сих пор я получил эффект только при открытии, и я не могу сделать эффект обратного перехода, то есть при закрытии постепенно уменьшать высоту

я получаю это:

код:

JSX:

const MenuItem = ({ key, index, tag, setVisible, visibleMenu }) => {
  const { name, dropdownItems, icon } = tag;
  const handleClick = index => {
    if (visibleMenu === true) return setVisible("none");
    if (visibleMenu === index) return setVisible("none");
    return setVisible(index);
  };
  return (
    <ListItem active={visibleMenu}>
      <div
        onClick={() => {
          handleClick(index);
        }}
        className="li-menuOpen"
      >
        <a>
          <FontAwesomeIcon
            className="icon-li"
            icon={icon}
            size={"lg"}
            fixedWidth
            color="white"
          />
          <span
            className="li-name"
            onClick={() => {
              handleClick(index);
            }}
          >
            {name}
          </span>
        </a>
        <span className="svg-arrow">
          {dropdownItems ? (
            <FontAwesomeIcon
              className="down-up_svg"
              icon={visibleMenu ? faAngleUp : faAngleDown}
              size="1x"
              fixedWidth
              color="white"
            />
          ) : (
            ""
          )}
        </span>
      </div>
      {dropdownItems ? (
        <DropDown list={dropdownItems} active={visibleMenu} />
      ) : (
        ""
      )}
    </ListItem>
  );
};

export default function App() {
  const MenuTags = [
    {
      name: "Carteira",
      link: "../cartcredit",
      icon: faWallet,
      dropdownItems: [
        { name: "Histórico", link: "/history" },
        { name: "Adicionar Crédito", link: "/add" }
      ]
    }
  ];
  const [visible, setVisible] = useState(null);
  return (
    <MenuList>
      {MenuTags.map((item, index) => (
        <MenuItem
          key={index}
          index={index}
          tag={item}
          setVisible={setVisible}
          visibleMenu={visible === index ? true : false}
        />
      ))}
    </MenuList>
  );
}

DropDown JSX и CSS С эмоциями

   const increaseHeightDrop = keyframes`
from { 
  max-height: 0;
}
to   { 
  max-height: 500px;
}
`;
const decreaseHeight = keyframes`
from { 
  max-height: 500;
}
to   { 
  max-height: 0px;
  display:none;
}
`;
const OpenedStyled = styled.ul`
  ${props => {
    if (props.active) {
      return css`
        animation: ${decreaseHeight} 0.8s;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
      `;
    }
  }}
  overflow: hidden;
  animation: ${increaseHeightDrop} 0.8s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  padding: 7px 15px;
  background: #307096;
  li {
    white-space: nowrap;
    padding: 5px 5px 5px 0px;
  }
  a {
    font-family: "Ubuntu";
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
    color: #fff;
  }
  & .li-open:hover > .icon-li-drop {
    color: orange;
  }
  & .icon-li-drop {
    margin-right: 10px;
  }
`;

const OpenedSide = ({ open, active, list }) => {
  return (
    <>
      {active ? (
        <OpenedStyled open={open} active={active}>
          {list.map(item => (
            <li className="li-open" key={item.name}>
              <FontAwesomeIcon
                className="icon-li-drop"
                icon={faCircleNotch}
                size="1x"
                fixedWidth
                color="white"
              />
              <a>{item.name}</a>
            </li>
          ))}
        </OpenedStyled>
      ) : (
        ""
      )}
    </>
  );
};

const DropDown = ({ active, list }) => {
  console.log(list);
  return <OpenedSide active={active} list={list} />;
};

export default DropDown;

пример:

https://codesandbox.io/s/purple-silence-ytc5h?file= / ср c

In мои коды и окно У меня есть рабочий пример, в основном у меня просто возникают трудности с тем, как я могу выполнить переход при закрытии выпадающего меню, если у кого-то есть идея лучше для кода, я был бы признателен