React-RouterNavLinkアクティブカラー

やあみんな私は本当にこれが起こっている理由を理解していません。アプリを起動すると、すべて問題ありません。メニューの最初の項目にはアクティブなクラスがあります。しかし、メニュー内の別の項目をクリックすると、この項目もこのクラスがアクティブになり、前のクラスがアクティブになりましたが削除されていません。

理解を深めるための画像

HTML

<div className="menu">
    <ul>
      <li><NavLink to="/" activeClassName="active">Domov</NavLink></li>
      <li><NavLink to="/about" activeClassName="active">O nás</NavLink></li>
      <li><NavLink to="/portfolio" activeClassName="active">Portfólio</NavLink></li>
      <li><NavLink to="/contact" activeClassName="active">Kontakt</NavLink></li>
    </ul>
</div>

css

   .menu ul{
        list-style: none;
        padding-left: 0;
        li{
            display: inline-block;
            margin: 0 1.5em;
            color: black;
            font-weight: 400;
            a{
                color: black;
                text-decoration: none;
                &.active{
                    color:$mainColor;
                }
            }
        }
    }

私は何が間違っているのですか？