Updates are affecting the states of multiple Contexts - reactjs

Question

I am trying to save 2 sets of input values using React Context, compare them using JSON.stringify(context1) !== JSON.stringify(context2) and if they are not the same, the page triggers a "save" CTA.
What I am not understanding is that the input updates are affecting both contexts even though I am only updating the state of one. Not understanding why this is happening.
Also, happy to hear more elegant ways of doing this.
Below is some code that replicates the issue and here is a CodePen of it:
const { useContext, useEffect, useState } = React
const Context1 = React.createContext()
const Context2 = React.createContext()
function Child(props) {
const { passHandleChange } = props
const { context1, setContext1 } = useContext(Context1)
const onChange = (index, key, event) => {
passHandleChange(index, key, event)
}
const formatPeople = () => {
return context1.tempPersons.map((person, index) => {
return (
<div>
{ index }
<input value={context1.tempPersons[index].name} onChange={event => onChange(index, 'name', event)} />
<input value={context1.tempPersons[index].email} onChange={event => onChange(index, 'email', event)} />
</div>
)
})
}
return (
<div>
{ formatPeople() }
</div>
)
}
function App() {
const initProfile = {
isModified: false,
tempPersons: [
{
name: "Bob",
email: "bob#email.com"
},
{
name: "Jill",
email: "jill#email.com"
},
{
name: "John",
email: "john#email.com"
}
]
}
const handleChange = (index, key, event) => {
let value = event.target.value
let tempPersons = context1.tempPersons
tempPersons[index] = context1.tempPersons[index]
tempPersons[index][key] = value
setContext1(prevState => ({
...prevState,
tempPersons: tempPersons
}))
}
const [context1, setContext1] = useState(initProfile)
const [context2, setContext2] = useState(initProfile.tempPersons)
return (
<div>
<Context1.Provider value={ { context1, setContext1 } }>
<Context2.Provider value={ { context2, setContext2 } }>
<Child passHandleChange={ handleChange } />
<hr />
<pre>
context1
{ JSON.stringify(context1) }
</pre>
<pre>
context2
{ JSON.stringify(context2) }
</pre>
</Context2.Provider>
</Context1.Provider>
</div>
)
}
ReactDOM.render( <App />, document.getElementById("root") );

Answer 1

It’s because objects in JavaScript are passed by reference, so the two contexts are actually referring to the same array (tempPersons). When that array is modified through the reference in one context, the other context will also appear modified, because they’re referring to the same array in memory.
You can confirm this by running the following:
const sharedArray = ['a', 'b'];
const ref1 = sharedArray;
const ref2 = sharedArray;
ref1.push('c');
console.log(ref2.length);
// 3