I am using the FontAwesome kit on my website, and I'm not having any issues displaying any icons.

However, now I just tried to do the following:

const [sort, setSort] = useState(true)

<i class={sort ? "fa-regular fa-angle-down" : "fa-regular fa-angle-up"}></i>

or

{sort ? <i class="fa-regular fa-angle-down"></i> : <i class="fa-angle fa-angle-up"></i>}

I can see from console.log and if I even do sort.toString() right where the icons are, that the state is changing when I click my button. However, in this case there is no rendering of the fa-angle fa-chevron-up icon. It just keeps showing the fa-angle fa-angle-down icon all the time. If I change the icons to some text, e.g:

{sort ? "foo" : "bar"}

Then it changes between the two. But not FontAwesome icons.

Am I doing something wrong, or...?