Почему не срабатывает проверка в js?

Question

[BoriHagen]

Есть два блока с data-аттрибутом:

<div class="main__categoties-wrapper__categorie" data-number="1" onclick="dropCategorie(this.dataset.number)">
				<h1 class="main__categoties-wrapper__categorie-name">Очки</h1>
				<img src="img/down-arrow.svg">
			</div>
			<div class="main__categoties-wrapper__categorie-item" data-number="1">
				<img width="100px" src="img/glasses.jpg">
				<h1 class="main__categoties-wrapper__categorie-item__tittle">Очки авиаторы</h1>
				<h2>Артикул: 1434</h2>
				<h2>Количество: 50 шт.</h2>
			</div>

И js код:

function dropCategorie (dropdownCategorieNumber) {
	var categorie = document.querySelector(`.main__categoties-wrapper__categorie-item[data-number="${dropdownCategorieNumber}"]`);
	console.log(categorie);
	if (categorie.style.display == "none"){
		categorie.style.display = "flex";
	} else if (categorie.style.display == "flex") {
		categorie.style.display = "none";
	} else {
		console.log("Что то пошло не так");
	}
}

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

Comments

[BoriHagen]

К слову, в CSS я указал всем блокам с данным классом display: none;