Не работает тернарный оператор

Не работает тернарный оператор и выдаёт всегда последнее else хотя стэйт icon меняется при нажатии кнопки(проверил через console.log)

const Navigation = () => {
  const icon = useSelector((state) => state.icon);
  console.log(icon);
  return (
    <div className="nav-bar">
      <div className="container">
        <div className="nav">
          <div className="nav-left">
            <div className="logo">
              {icon == "casual" ? (
                <img src="logo.svg" alt="" />
              ) : icon == "dark" ? (
                <img src="dark-icon.svg" alt="" />
              ) : (
                <img src="light-icon.svg" alt="" />
              )}
            </div>
            <div className="nav-left__a">
              <a href="#">Home</a>
              <a href="#">People</a>
              <a href="#">Search</a>
              <a href="#">Not Found</a>
              <a href="#">Fail</a>
            </div>
          </div>
          <div className="nav-right ">
            <img src="fav.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  );
};