React.js Context接口:如何只更新一个对象的一个值对，同时维护其他值对？

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        value1: 'initial value 1',
        value2: 'initial value 2',
        value3: 'initial value 3',
      },
      updateValue1: this.updateValue1,
    };
  }

  updateValue1 = (newValue) => {
    this.setState((prevState) => ({
      data: {
        ...prevState.data,
        value1: newValue,
      },
    }));
  };

  render() {
    return (
      <MyContext.Provider value={this.state}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(context) => (
          <div>
            <p>Value 1: {context.data.value1}</p>
            <p>Value 2: {context.data.value2}</p>
            <p>Value 3: {context.data.value3}</p>
            <button onClick={() => context.updateValue1('new value 1')}>
              Update Value 1
            </button>
          </div>
        )}
      </MyContext.Consumer>
    );
  }
}