I created a font-awesome-bars icon button and upon being clicked will show a menu. Apart from that, I also want the font-awesome-bars icon to be replaced by a cross icon. I tried to use toggle but it doesn't work, with the console saying there shouldn't be space characters. But if I remove space characters, the document will not be able to read font awesome icons. Please, help me in this. Thanks you in advance.

<div class="hamburger-menu">
      <i class="fa-solid fa-bars"></i>
    </div>

const hamburgerMenuBtnContainer = document.querySelector('.hamburger-menu');
const hamburgerMenuBtn = document.querySelector('.hamburger-menu i');

hamburgerMenuBtnContainer.addEventListener('click', function(){
   hamburgerMenuBtn.classList.toggle('fa-solid fa-xmark');
});