Dropdown работает на Chrome, но не на Safari и Firefox

Question

У меня есть кнопка, которая запускает список неупорядоченных списков.

, который отлично работает на хром.

Это кнопка с раскрывающимся списком внутри тела (список заказов)

 <button
    key={title}
    className="filters-item filters-item-btn"
    onFocus={() => toggleDropdown(title)}
    onBlur={() => toggleDropdown(title)}
  >
    <span className={openedDropdown && titleDropdown === title ? 'filters-item-active' : ''}>
      {title}
    </span>
    <span
      className={'arrow-up-icon'}
    />
    {openedDropdown ? (
      <Dropdown />
    ) : (
      ''
    )}
  </button>

Нужна помощь, чтобы выяснить, в чем проблема.

CSS часть кода:

.filters-wrapper {
  width: 100%;

  .filters {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid var(--color-grey-light);

    &-options {
      outline: none;
      flex: 2;
    }

    &-item {
      color: var(--color-grey);
      cursor: pointer;

      &-btn {
        border: none;
        font-size: 14px;
        cursor: pointer;
        background-color: white;
      }

      &-active {
        color: var(--color-black);
        height: 21px;
        font-size: 14px;
        line-height: 21px;
        cursor: pointer;
      }
    }

    .arrow-up-icon {
      font-size: 16px;
      float: right;
      padding-top: 3.5px;
      margin-left: 3px;
      cursor: pointer;
    }

    .arrow-down-icon {
      font-size: 16px;
      float: right;
      padding-top: 1px;
      margin-left: 3px;
      cursor: pointer;
    }
}

Любые советы, ресурсы, комментарии, где я могу узнать и выяснить, как решить эту проблему?