Раскрывающееся меню боковой панели не работает, когда я создаю его внутри list.map ()

Question

Мое раскрывающееся меню боковой панели не открывается, когда я создаю его в методе list.map (), когда он создается вне этого метода, он работает нормально.

В приведенном ниже коде показан генерирующий jsxмое выпадающее меню боковой панели через list.map, и щелчок не работает:

 const listMenu = this.state.bestiaryList.map((bestiary) => (
      <li key={bestiary.id} className="sidebar-dropdown">
        <a href="#">
          <span>{bestiary.name}</span>
        </a>
        <div className="sidebar-submenu">
          <ul>
            <li>
              <a href="#">Dashboard 2</a>
            </li>
          </ul>
        </div>
      </li>
    ));  

В приведенном ниже коде показана функция jquery, которая позволяет щелкать мышью по меню, созданным за пределами list.map:

jQuery(function ($) {
    $(".sidebar-dropdown > a").click(function () {
      $(".sidebar-submenu").slideUp(200);      
      if (
        $(this)
          .parent()
          .hasClass("active")
      ) {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .parent()
          .removeClass("active");
      } else {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .next(".sidebar-submenu")
          .slideDown(200);
        $(this)
          .parent()
          .addClass("active");
      }
    });

    $("#close-sidebar").click(function () {
      $(".page-wrapper").removeClass("toggled");
    });
    $("#show-sidebar").click(function () {
      $(".page-wrapper").addClass("toggled");
    });
  });

И, наконец, меню, созданное вне list.map, работает нормально:

<li className="sidebar-dropdown">
                    <a href="#">
                      <i className="fa fa-tachometer-alt" />
                      <span>Dashboard</span>
                      <span className="badge badge-pill badge-warning">New</span>
                    </a>
                    <div className="sidebar-submenu">
                      <ul>
                        <li>                          
                          <a href="#">Dashboard 1                            
                          </a>
                        </li>
                        <li>
                          <a href="#">Dashboard 2</a>
                        </li>
                        <li>
                          <a href="#">Dashboard 3</a>
                        </li>
                      </ul>
                    </div>
                  </li>

Если бы кто-нибудь мог мне помочь, я был бы очень благодарен.