Почему активная ссылка не добавляет стиль красного цвета?

import s from './Navbar.module.css';
import {NavLink} from "react-router-dom";

const Navbar = () => {
    return <nav className={s.nav}>
    <div className={s.item}>
      <NavLink to="profile" activeClassName={s.active}>Profile</NavLink>
      </div>
    <div className={s.item}>
      <NavLink to="dialogs">Messages</NavLink>
      </div>
      <div className={s.item}>
      <a>News</a>
      </div>
      <div className={s.item}>
      <a>Music</a>
      </div>
      <div className={s.item}>
      <a>Settings</a>
      </div>
     </nav>
}

export default Navbar;

.nav {
  grid-area: n;
  background-color: #333;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.item a {
    color: white;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}

.item s.active {
    color: red;
}