The best way to implement override data state from parent class

I'm facing a really hard problem. I want to create a wrapper class that can do something like "override" the state of the child without affecting them. Quite hard to understand, I know.

Let's see some minimal code below:

class State{
    key: string; //Unique key
    //This is really complex, nested, array, etc state.
    value: number | string | State | State[] | any
}

class Child{
    state : State;
}
class Wrapper{
    overrideState: State;
    child: Child;
    
    constructor(child: Child){
        this.child = child;
    }

    getFinalState() : State{
        //This will return the new State (or not), that is the final state
    }
}

A function to call them:

function client(){
    let child = new Child();
    child.state = new State();
    child.state.value = "original";

    let parent = new Wrapper(child);
    parent.overrideState = new State();
    parent.overrideState.value == "overrided"

    console.log(parent.getFinalState().value); //It should be `overrided`, simple
}

The problem is State class is really complex.

Actually, I have almost done with the getFinalState function by using looping, checking type, Lodash.cloneDeep,...a ton of code. And I think it's really complex to maintain, hard to read, and maybe has some risk.

I don't think my way is right, I try to research some design patterns but am still stuck. If you have any ideas, keywords, or something. I really appreciate that. Thank you