请问下老师为何所有右上角的按钮不能点击呢？

Question

我想要做一个模拟VSCode布局的练习：

但是，现在有1个问题就是：
右上角的按钮不能点击

代码如下： https://codesandbox.io/s/468nj4

针对问题1的关键代码：

// header/index.tsx
<ul className={styles.actionsContainer}>
  <li>
    <a
      className={classNames(
        "codicon",
        showPrimarySideBar
          ? "codicon-layout-sidebar-left"
          : "codicon-layout-sidebar-left-off",
        styles.actionLabel
      )}
      role="button"
      aria-label="Toggle Primary Side Bar (⌘B)"
      title=""
      tab-index="0"
      onClick={() => {
        console.log('ok')
        onShowPrimarySideBarChanged(!showPrimarySideBar)
      }}
    ></a>
  </li>
...

我找了半天没有找到问题所在，请教下大佬们这个是什么原因导致的呢？

===

更新1

我尝试阻止a标签默认事件：

onClick={(e) => {
                console.log(e)
                e.preventDefault()
                console.log('ok')
                onShowPrimarySideBarChanged(!showPrimarySideBar)
              }}

但是没有作用。