Анимация высоты выпадающего меню

Привет, я пытаюсь сделать раскрывающуюся анимацию, чтобы при открытии раскрывающегося списка высота увеличивалась, как если бы оставлялось 0, так что:

Но пока я добился только этого:

Я хотел показать, как будто высота увеличилась с задержкой

Это мой код:

JSX:

export default function App() {
  const [DropItemUser, setDropUser] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <button onClick={() => setDropUser(!DropItemUser)}>
        click here to hide or open menu
      </button>
      <WrapUser dropdown={DropItemUser}>
        <ul className="dropdown">
          <li>My Profile</li>
          <li>Edit Profile</li>
          <li>Settings</li>
        </ul>
      </WrapUser>
    </>
  );
}

Css с эмоциями js:

export const WrapUser = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  border-color: rgba(253, 202, 64, 0.5) !important;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  padding: 15px 0px;
  & .wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  & .user {
    display: flex;
    flex-direction: column;
    h3 {
      font-family: "Poppins", sans-serif;
      font-size: 15px;
      font-weight: 400;
      text-decoration: none;
      color: #fff;
    }
    p {
      font-family: "Poppins", sans-serif;
      font-size: 12px;
      font-weight: 400;
      text-decoration: none;
      color: #fff;
    }
  }
  & .avatar {
    display: flex;
    height: 40px;
    img {
      padding: 0 10px;
      height: 100%;
    }
  }
  & .svgAngle {
    display: flex;
    justify-self: flex-end;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    svg {
      cursor: pointer;
    }
  }
  & .dropdown {
    height: ${props => (props.dropdown ? "auto" : "0")};
    padding: 15px 0;
    padding-left: 10px;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
    background: green;
    color: #000;
    li {
      padding-top: 10px;
    }
  }
`;

И пример:

https://codesandbox.io/s/patient-lake-mlcui?file=/src/styled.js:39-1402