Почему мое раскрывающееся меню не раскрывается в React?

Question

Я пытаюсь создать простой компонент React для навигационной панели. Некоторое время я пытался решить эту проблему, но ничего, что я могу найти, похоже, не работает.

Когда я нажимаю на одно из своих раскрывающихся меню в своей навигационной панели, вместо того, чтобы показывать его раскрывающиеся элементы, он действует как ссылку, и автоматически перенаправляет меня на то, что есть href. Я точно знаю, что этот код работает ВНЕ РЕАКТА. Я пробовал обходные пути, такие как использование компонента Dropdown React Bootstrap, но у меня это не работает по нескольким причинам. Вот код компонента реакции навигатора:

<header>
        <nav className="navbar navbar-expand-lg navbar-dark bg-bidpro">
          <NavLink className="navbar-brand" to="/">
            <img src={BidProLogo} alt="BidPro Logo" />
          </NavLink>
          <div
            className="collapse navbar-collapse justify-content-end"
            id="navbarNavDropdown"
          >
            <ul className="navbar-nav">
              <li className="nav-item dropdown">
                <a
                  className="nav-link dropdown-toggle"
                  href="/american-airlines"
                  id="AmericanAirlinesDropDown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  American Airlines
                </a>
                <div
                  className="dropdown-menu"
                  aria-labelledby="AmericanAirlinesDropDown"
                >
                  <a
                    className="dropdown-item"
                    href="/american-airlines/bidtypes"
                  >
                    Bidtypes
                  </a>
                  <div className="dropdown-divider"></div>
                  <a className="dropdown-item" href="/american-airlines/pilots">
                    Pilots
                  </a>
                </div>
              </li>

              <li className="nav-item dropdown">
                <a
                  className="nav-link dropdown-toggle"
                  href=" "
                  id="AlaskaAirlinesDropDown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Alaska Airlines
                </a>
                <div
                  className="dropdown-menu"
                  aria-labelledby="AlaskaAirlinesDropDown"
                >
                  <a className="dropdown-item" href="/">
                    Bidtypes
                  </a>
                  <div className="dropdown-divider"></div>
                  <a className="dropdown-item" href="/">
                    Pilots
                  </a>
                </div>
              </li>

              <li className="nav-item dropdown">
                <a
                  className="nav-link dropdown-toggle"
                  href=" "
                  id="JetSuiteDropDown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  JetSuite
                </a>
                <div
                  className="dropdown-menu"
                  aria-labelledby="JetSuiteDropDown"
                >
                  <a className="dropdown-item" href="/">
                    Bidtypes
                  </a>
                  <div className="dropdown-divider"></div>
                  <a className="dropdown-item" href="/">
                    Pilots
                  </a>
                </div>
              </li>

              <li className="nav-item dropdown">
                <a
                  className="nav-link dropdown-toggle"
                  href=" "
                  id="UPSDropDown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  UPS
                </a>
                <div
                  className="dropdown-menu dropdown-menu-right"
                  aria-labelledby="UPSDropDown"
                >
                  <a className="dropdown-item" href="/">
                    Bidtypes
                  </a>
                  <div className="dropdown-divider"></div>
                  <a className="dropdown-item" href="/">
                    Pilots
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </nav>
      </header>