How to STOP React state from being modified when modifying array set to state?

Trust you are having a great day!

I'm running into a serious issue with React. I have a state which holds an array. In a function I copy the state into a new variable. When I modify this newly defined variable it also updates the state which is not what I want.

Example:

const [arrayState, setArrayState] = useState(
    [
        {
            id: 'ID_1'
            text: 'item 1',
        },
        {
            id: 'ID_2'
            text: 'item 2',
        },
        {
            id: 'ID_3'
            text: 'item 3',
        },
        {
            id: 'ID_4'
            text: 'item 4',
        },
    ]
);

const myFunction = () => {
    let myVariable = [...arrayState];

    myVariable[1].text = 'myVariable item 2'; // This is modifying arrayState as well which is wrong

};

I only want myVariable to be modified and not my state (arrayState) as well.

You can use structuredClone to make a deep clone of the array of objects.

let myVariable = structuredClone(arrayState);

Alternatively, a solution that only works for this specific data structure:

let myVariable = arrayState.map(o => ({...o}));

It has to do with primitive and reference values. Arrays and objects do not store values, but they refer to addresses in memory where values ​​are stored. A simple example:

const func = () => {
    // Same memory reference
    const temp = arrayState;
    temp[1] = "4";
    setAttayState(temp);
}

above code does not re-render because reference of the value has not changed.

You have to assign new reference address like this:

const func = () => {

    // Create new reference
    const temp = [...arrayState];
    temp[1] = "4";
    setAttayState(temp);
}