Why is my imported JSON object being overwritten?

I experienced a very strange issue that I was able to finally resolve, but I don’t understand why it was happening in the first place. As my solution was guesswork, I am hoping to understand the mechanics better.

I have a function called createNewList() which creates a new object from a template object in default.json. This is meant to be repeatable so that multiple new lists can be created and added to this array, and the data from each of these lists can be independently changed. It works fine when I create my first list, but when I create a second list, changing the data in one changes it in both lists, which appear to be the same list.

I spent a long time debugging this problem and narrowed it down to the imported listsData which is being changed. Thus, creating a new list from the template is working correctly, but the template is what is changing.

import listsData from "./assets/data/default.json";

const createNewList = function createNewListData() {
    const { newList } = listsData;
    // Push list to lists array and switch current list index
    const newListIndex = lists.push(newList) - 1;
    switchCurrent(newListIndex);
}

I found this stack overflow question that helped me resolve the issue. I replaced the first line of the function with:

const { newList } = JSON.parse(JSON.stringify(listsData));

As this seems like an inelegant solution to the problem, I am trying to understand why it works and why it is needed in order to not alter the template object I’m using to create new lists?