Раскрывающееся меню не получает правильный стиль

В моей функции рендеринга React есть следующий код:

<div ref = "btnGroup" className = "dropdown">
   <button class = "dropdown-toggle" data-toggle = "toggle" onClick = {this.toggleDropdown}></button>
   <ul class = "scrollable-menu-parent dropdown-menu">
      <div>
         <form class = "droplist-panel">
            <input class = "droplist-search" />
            <div class = "scrollable-menu">
               <li class = "dropdown-item"> </li>
               ...
               ...
            </div>
         </form>
      </div>
   </ul>
</div>

В раскрывающейся функции переключения я добавляю открытый класс в самый верхний div.

Однако <ul> не получает стиль автоматического раскрывающегося списка, когда он открыт, ширина намного больше, а расположение также неверное.

Я что-то делаю не так с раскрывающимся списком, раскрывающимся списком и раскрывающимся меню, из-за чего <ul> не получает правильные классы?

Редактировать:

    toggleDropdown() {
        const $el = $(this.refs.btnGroup);
        if ($el.is('.open')) {
            this.closeDropdown($el);
        }
        else {
            this.openDropdown($el);
        }
    },

    closeDropdown(ele) {
        ele.removeClass('open');
        this.clearState();
    },

    openDropdown(ele) {
        ele.addClass('open');
        if (this.props.onOpen) {
            this.props.onOpen.bind(this)();
        }
    },