I'm currently creating an application with React where I have an Object called Power. Power contains EffectOptions. I have a fixed list of EffectOptions to choose from, where they contain ID, name, etc. and an InstanceID, as I can add the same option multiple times.

What is happening though is that, everytime I add a new EffectOption with a new InstanceID, it reworks all the instanceID of all already added objects to a new order.

Here's my code:

const AddOption = (optionID: number) => {
    
    let tempOptions: EffectOption[] = localPower.powerOptions;

    let option: EffectOption = optionsList.find(elem => elem.id === optionID);
    let _newOption: EffectOption = new EffectOption(
        option.id, option.name, option.exclusive, option.ranked,
        option.rank, option.maxRank, option.extraField,
        option.description, option.benefits
    );
    _newOption.instanceID = _IDGenerator.optionsID++;
    
    
    tempOptions.push( _newOption );
    tempOptions.sort(function (a, b) {
        return ('' + a.name).localeCompare(b.name);
    });

    let tempPower = localPower;
    tempPower.powerOptions = [...tempOptions];
    
    let sum: number = 0;
    for(let options of tempOptions){
        sum += options.rank;
    }


    setPowerRank( sum );
    setLocalPower( tempPower );
    console.log(tempOptions);
}

Adding four options I'm having:

1. [ {id: 5001, InstanceID: 0} ]
2. [ {id: 5001, InstanceID: 1}, {id: 5001, instanceID: 1} ]
3. [ {id: 5001, instanceID: 2}, {id: 5001, instanceID: 1}, {id: 5001, instanceID: 2} ]
4. [ {id: 5001, instanceID: 3}, {id: 5001, instanceID: 1}, {id: 5001, instanceID: 2}, {id: 5001, instanceID: 3} ]

Though if I change anything else, like the ID or name, etc., it stores correctly.

Thanks for your attention.