React - скользящее вниз меню показывает пункты меню при наведении курсора

Я пытаюсь добавить раскрывающееся меню, которое медленно раскрывает элементы меню. Я использую CSSTransition от react-transition-group. У меня есть синий фон, который медленно скользит вниз, как я хочу. Но текстовые элементы появляются сразу же. Вот мой код и ящик, показывающий проблему: https://codesandbox.io/s/compassionate-dawn-zbmt5

Компонент My Navbar:

import { Link } from "react-router-dom";
import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";

const Navbar = () => {
  const [showSchedDropdown, setShowSchedDropdown] = useState(false);

  return (
    <ul className = {"nav"}>
      <li
        className = {"nav-item dropdown"}
        onMouseEnter = {() => setShowSchedDropdown(true)}
        onMouseLeave = {() => setShowSchedDropdown(false)}
      >
        <button
          className = {"nav-link dropdown-toggle"}
          aria-haspopup = {"true"}
          aria-expanded = {"false"}
          onClick = {() => setShowSchedDropdown(true)}
        >
          Dropdown Menu
        </button>
        <CSSTransition
          in = {showSchedDropdown}
          timeout = {1300}
          classNames = {"hidden-menu"}
        >
          <div className = {"dropdown-menu"}>
            {showSchedDropdown && (
              <>
                <Link
                  className = {"dropdown-item"}
                  to = {"/baglines"}
                  onClick = {() => setShowSchedDropdown(false)}
                >
                  Menu Item 1
                </Link>
                <Link
                  className = {"dropdown-item"}
                  to = {"/totelines"}
                  onClick = {() => setShowSchedDropdown(false)}
                >
                  Menu Item 2
                </Link>
                <Link
                  className = {"dropdown-item"}
                  to = {"/otherlines"}
                  onClick = {() => setShowSchedDropdown(false)}
                >
                  Menu Item 3
                </Link>
              </>
            )}
          </div>
        </CSSTransition>
      </li>
    </ul>
  );
};

export default Navbar;

И CSS:

.dropdown-menu {
  display: block;
  margin-top: 0;
  padding-top: 0;
  color: #ffffff;
  background-color: rgba(#265077, 1);
  font-size: 0.9rem;
  border: none;
  transition: height 1.3s ease;

  &.hidden-menu-enter,
  &.hidden-menu-exit-done {
    height: 0;
    transition: height 1.3s ease;
  }

  &.hidden-menu-enter-active {
    height: 100px;
    transition: height 1.3s ease;
  }

  &.hidden-menu-enter-done {
    height: 100px;
  }

  &.hidden-menu-leave {
    height: 0;
    transition: height 1.3s ease;
  }

  &.hidden-menu-leave-active {
    height: 100px;
    transition: height 1.3s ease;
  }
}