SVG fill not updating

<div class="d-flex column-gap-2">
  <img src="./assets/images/star.svg" alt="Star">
  <img src="./assets/images/star.svg" alt="Star">
  <img src="./assets/images/star.svg" alt="Star">
  <img src="./assets/images/star.svg" alt="Star">
  <img class="gray-star" src="./assets/images/star.svg" alt="Star">
</div>

    img[alt="Star"] {
        transform: none;
    }

    .gray-star {
        fill: gray !important;
    }

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15.239" viewBox="0 0 16 15.239">
  <path id="f35e3bcbde3528bceb03a6a775c06def" d="M-54.987,56.259c-.569.405-4.222-2.165-4.921-2.17s-4.393,2.505-4.956,2.091.76-4.673.549-5.338-3.747-3.392-3.526-4.054,4.691-.723,5.261-1.129,2.077-4.6,2.777-4.6,2.139,4.226,2.7,4.64,5.031.548,5.242,1.213-3.369,3.335-3.591,4S-54.418,55.854-54.987,56.259Z" transform="translate(67.851 -41.064)" fill="#f8b84e"/>
</svg>