Unable to make a transition for Dropdown

Question

I have a dropdown component which has a button on click on it it opens/closes the list box, i want to make the list to appears slowly with transition, i tried it but nothing works, what is wrong in my code?

      <ul className={clsx("dropdown-options", isOpen && "show")}>
            {options?.map((option: any, index: any) => {
              return (
                <li className={clsx("dropdown-option")}>
                  <span>{option.label}</span>
                </li>
              );
            })}
          </ul>

.dropdown-options {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: 100%;
  left: 0;
  top: calc(100% + 0.25em);
  z-index: 100;
  display: none;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  &.show {
    display: block;
  }
}

.dropdown-option {
  padding: 0.25em 0.5em;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease,
    padding-left 0.2s ease;
}