Почему js не изменяет z-index css элемента сразу после нажатия кнопки?

у меня есть
<div class="header-nav">
<a class="logo" href="#">Kelwin</a>

<nav id="nav" class="nav open">
<li id="list" class="nav__list">
<ul><a id="nav__item" class="nav__item" href="#">Home</a></ul>
<ul><a class="nav__item" href="#">Works</a></ul>
<ul><a class="nav__item" href="#">Services</a></ul>
<ul><a class="nav__item" href="#">About</a></ul>
<ul><a class="nav__item" href="#">Contact</a></ul>
</li>
<button id="nav-btn" class="nav__button">
<img id="nav-btn-img" src="./img/NAV.svg" alt="Nav button">
</button>
</nav>
</div>

(css) .nav.open .nav__list{
position: fixed;
top: 0;
bottom: 1;
left: 1;
right: 0;
background-color: white;
border-radius: 0 0 0 15px;

padding: 46px 30px;
z-index: -1;
display: flex;
flex-direction: column;
row-gap: 40px;

font-size: 36px;
font-weight: 600;
}
и js const nav = document.querySelector('#nav')
const navBtn = document.querySelector('#nav-btn')
const navBtnImg = document.querySelector('#nav-btn-img')
const activeElement = document.querySelector('#nav__item')

navBtn.onclick = function() {
if (nav.classList.toggle('open')) {
navBtnImg.src = "./img/navcl.svg"
activeElement.classList.add('active')

let list = document.querySelector('#list')
list.style.zIndex = 1
} else {
navBtnImg.src = "./img/NAV.svg"
}
}
прикол в том, что когда js обрабатывает 1 клик, то действие не происходит, а только срабатывает на 2 клик(связано это с z-index). как это исправить?