Как сделать, чтобы раскрывающийся список закрывался только при нажатии снаружи?

У меня есть раскрывающийся список с множественным выбором, проблема заключается в том, что когда пользователь выбирает один элемент, раскрывающийся список закрывается.

Как сделать, чтобы раскрывающийся список закрывался только при внешнем клике?

Выпадающий список создается с помощью html ul > li:

// Here we loop trough list of filters and render options as <li> tags
 <ul name = "filters" className = "dropdown">
    {subFilters.map((filter, i) => (
      <li
        defaultChecked = {filter.name}
        onClick = {() => handleSelect(filter)}
        className = {`option`}>
        <span>{filter.name}</span>
      </li>
    ))}
  </ul>

Часть Css. Используемые классы:

• dropdown для тега
• option для

.dropdown {
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  position: absolute;
  z-index: 1;
  font-size: 16px;
  border-radius: 3px;
  border: solid 1px #dee1e5;
  box-shadow: 0 9px 8px rgba(0, 0, 0, 0.05);
  background-color: white;
  outline: none;
  cursor: pointer;
}

.option {
  list-style-type: none;
  padding: 10px 10px 10px 0;
  margin-left: 2.6rem;
}

Вот как выглядит это раскрывающееся меню: