Assign same values to two different state, but when updating them they should be impended on their own values

Question

So I'm facing this bug where when I edit "this.state.values2" , "this.state.values1" is also getting updated. I want them to have the same values initially but when edited have independant values.

Here is what I have:

    this.state = {
          values1: {},
          values2: {},
        }

    componentWillMount() {
        this.setState({ values: this.props.values })
        this.setState({ splitValues: this.props.values })
      }
    //for form 1
    onChangeValue1 = (key: any, value: any) => {
        const values = this.state.values
        values[key] = value
        this.setState({ values }, () => {})
        this.props.onChange(key, value)
      }
    // for form 2
      onChangeValue2 = (key: any, value: any) => {
        const splitValues = this.state.splitValues
        splitValues[key] = value
        console.log('splitValues',splitValues)
        this.setState({ splitValues }, () => {})
      }

But what I'm facing is when I update form 2, form 1 is also being updated with the same value. I don't understand because they both have different states and also have different onChange functions.