I have super simple lit element and I'm trying to have a closed or open icon based on isOpen reactive property. Clicking on the element sets this.isOpen = !this.isOpen, which should cause an update. Unfortunately, clicking on the button doesn't cause a re-render. Any ideas why this is happening? Console.log logs out true false true false tue correctly when spamming clicks.

edit: changed isOpen to a string open and closed. No effect.
edit2: changed isOpen to @state(). No effect.
edit3: added this.requestUpdate() and it works. But it makes no sense! What is so "reactive" about "reactive" properties if changing them doesn't cause a re-render or even trigger lifecycle methods??????

@customElement('header-top')
export class HeaderTop extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    :host([hidden]) {
      display: none;
    }
    .settings-btn {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      fill: white;
      cursor: pointer;
      padding: 0;
      margin: 0;
      border: none;
      background: none;
    }
    .settings-btn:hover {
    }
  `;

  @property({ type: Boolean })
  isOpen = false;

  public render() {
    console.log(no-rerender).
    return html`<header>
      <nav>
        ${this.isOpen
          ? html`<button
              class="settings-btn close"
              @click="${this._openOrCloseMenu}"
            >
              <i>${close}</i>
            </button>`
          : html`<button
              class="settings-btn open"
              @click="${this._openOrCloseMenu}"
            >
              <i>${equalizer}</i>
            </button>`}
      </nav>
    </header>`;
  }

  public _openOrCloseMenu(e: Event) {
    console.log(this.isOpen); // triggers
    this.isOpen = !this.isOpen;
  }
}