Caret change on collapse/expand using Bootstrap 4 css

Question

I\'m not sure why my caret isn\'t changing from down to right using CSS using Bootstrap 4 and CSS. I tried the .collapsed CSS property. Here is a codepen: https://codepen