ReactJS не перерисовывает иконку от fontawesome

import SidebarSubmenu from '../SidebarSubmenu';

const SidebarItem = ({ isOpen, title, subNav = false, handleClick }) => {
  console.log(isOpen);
  return (
    <li
      className={isOpen ? 'sidebar-item sidebar-item--active' : 'sidebar-item'}
      onClick={handleClick}
    >
      <a href="#" className="sidebar-item__link">
        {title}
        {subNav && (
          <i
            className={
              isOpen
                ? `sidebar-item__link__arrow sidebar-item__link__arrow--active fas fa-caret-down`
                : `sidebar-item__link__arrow fas fa-caret-down`
            }
          ></i>
        )}
      </a>
      {subNav && <SidebarSubmenu isOpen={isOpen} links={subNav} />}
    </li>
  );
};

export default SidebarItem;

Я получаю пропс isOpen = true, все перерисовывается кроме самой иконки, но если по умолчанию поставить true, то применится класс --active и иконка будет перевернута, но при смене стейта isOpen, иконка снова не перерисовывается. Кто-нибудь сталкивался с этой проблемой? P.S в DOM код иконки меняется с тега i на svg. Использую NextJS.