The behavior whereby the original data is being updated after you mutate where the data is copied lies in the distinction between Value Types and Reference Types, which are the two broad categories that all data types in JavaScript fall into. For value types, it means that a value is simply a value and not the value retrieved from pointing to a position in memory. However, reference types are those data types whose value is not directly stored, but rather what is stored is a reference to a point in memory, and the value for those types is retrieved every time by pointing to the point in memory for the most updated value stored there.

That takes us to how to copy values from reference types in an intentional way, and those are Value Copy and Reference Copy. By doing value copy, it means that the value stored in the memory of the original data is copied to another point in memory, while a reference copy means that the copy of the original data is made by simply pointing a new variable to the same place in memory where the original data is pointing to in memory. The implication of either approach is that in the case of value copy, modifying the value-copied data will not mutate the original data, in the case of reference copy, however, modifying the reference-copied data will mutate the original data since that will mutate the data stored in the same memory location that both the original data and reference-copied data are pointing to.

The trickier part is in when you have reference types stored within reference types as is the case of the data parameter that your code shows have a section property, whose value is an Array (a reference type), that is a collection of item objects, each of which is an Object (also a reference type). The trick here is that even though Array.prototype.map method is known to be a pure function that makes a value copy of the array it is operating upon; which is section in your case, yet, it will only make a value copy of the array and cares less about making a value copy of the items within the array, which is what caused how mutating those items ended up mutating the original data you passed as an argument into the function eventually.

Thus, the way to solve that is to make a deep value copy of your arguments before operating on them within your function once they are reference types, and making a value copy of their children that are also reference types.

The below approach is one of many approaches that can achieve that:

const pureMassageData = (data) => {
  let dataCopy = { ...data };
  // Make a value copy of other reference props as is done for sections and then items within section as below
  dataCopy.sections = dataCopy.sections.map(item => ({ ...item }));
  return {
      title: dataCopy?.label,
      sections: dataCopy?.sections?.map((item) => {
        if (item.display === "HR") {
          const tableBody = [{ id: "new" }];
          item["tableData"] = tableBody;
        }
        return item;
      }),
    }
}