Как закрыть одно подменю при открытии другого

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

JS:

if (filter) {
    blockFilter.forEach(item => {
        item.addEventListener("click", (event) => {
            document.querySelector("block-filter__dropdown_state_active")?.classList.remove("block-filter__dropdown_state_active");        
            item.querySelector(".block-filter__dropdown").classList.toggle("block-filter__dropdown_state_active");
            item.querySelector(".block-filter__icon").classList.toggle("block-filter__icon_state_active");
            if (event.target.classList.contains("block-filter__item")) {
                item.querySelector(".block-filter__value").textContent = event.target.textContent;
            }
        });
    })
}

HTML:

<div class="filter hero__filter">
 <form class="filter__form">
    <div class="filter__block block-filter">
        <div class="block-filter__button">
            <div class="block-filter__header">
                <span class="block-filter__type">Purpose</span>
                <div class="block-filter__icon"></div>
            </div>
            <span class="block-filter__value">Buy</span>
        </div>
        <div class="block-filter__dropdown">
            <span class="block-filter__item">Buy</span>
            <span class="block-filter__item">Sell</span>
        </div>
    </div>