html special character conversions of ‘&’ into ‘amp;’ issue

So I have an array that is used to swap the values of a keyboard app Im building on a click of a button. It works perfectly but in the text field when ‘&’ is selected it shows on screen as ‘amp;’ how do I get around this ?

in my HTML I have an input and

   <textarea
    name="text"
    id="textIn"
    class="textbox"
  ></textarea>

    <button>Swap<button>

    <div class="row k2">
      <div class="key">q</div>
      <div class="key">w</div>
      <div class="key">e</div>
      <div class="key">r</div>
      <div class="key">t</div>
      <div class="key">y</div>
      <div class="key">u</div>
      <div class="key">i</div>
      <div class="key">o</div>
      <div class="key">p</div>
    </div>

and in javascript my code I have this event listener:

fucntionalKey.forEach((funcKey) => {
  funcKey.addEventListener("click", () => {
 if (funcKey.classList.contains("shift")) {
      const k2 = Array.from(document.querySelector(".k2").children);
     
      // k2
      const shiftK2 = ["-", "/", "_", ":", ";", "(", ")", "$", "&", "@", '"'];
      const copyK2 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
    
      if (k2[0].innerHTML === "q") {
        k2.map((key, index) => {
          key.innerHTML = shiftK2[index];
        });
      } else if (k2[0].innerHTML === "-") {
        k2.map((key, index) => {
          key.innerHTML = copyK2[index];
        });
      }
      })}});

so this function when any key in that div is clicked it adds the value/innerHTML into the textArea’s value and appears on screen. Then when the swap button is clicked it swaps the values of the innerHTML with the shiftcopy. Everything works as intended until I click ‘&’ in the textArea it appears as ‘amp;’ and it I need it to just appear as ‘&’. Any help would be appreciated and I hope this repost makes a bit more sense.