Need Help Understanding Error

I’m trying to understand the error TypeError: Cannot assign to read only property ‘6’ of string ‘Dolce & Gabbana’. when I have str[i] replacing a string value. When I have an array I don’t have that error. Why does it happen when I try to replace a character value?

  **Your code so far**

function convertHTML(str) {
//&=&
//<=&lt;
//>=&gt;
//'""'=no quotes or &quot; &quot
//'=&apos;
for (let i = 0;  i < str.length; i++) {
  if (str[i] === "&") {
      str[i] = "&amp;";
  } else if (str[i] === "<") {
      str[i] = "&lt;";
  } else if (str[i] === ">") {
      str[i] = "&gt;";
  } else if (str[i] === '"') {
      str[i] = "&quot;";
  } else if (str[i] === "'") {
      str[i] = "&apos;";
  }
}
return str;
}

console.log(convertHTML("Dolce & Gabbana"));
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Convert HTML Entities

Link to the challenge:

String is an immutable data type and it doesn’t support such assignment.

string are immutable, you can’t change characters of a string, arrays are mutable, you can change array elements