How to overwrite values in array inside object

there.
I am recently learning JS and I get into the trouble, rn.
I use this method to overwrite values:

const person1 = {name: 'Jack', age: 10, job: 'developer'}
const person2 = {name: 'Su', age: 20}
const person3 = {name: 'Jin', job: 'singer'}
const result = {...person1, ...person2, ...person3} // {name: 'Jin', age: 20, job: 'singer'}

However, what if there is another object(array) inside object?
For instance:

const person1 = {name: 'Jack', age: 10, job: 'developer', hobbies: [{a:'baseball'}, {b:'basketball'}]}
const person2 = {name: 'Su', age: 20}
const person3 = {name: 'Jin', job: 'singer', hobbies: [a:'sing']}
const result = {...person1, ...person2, ...person3} // {name: 'Jin', age: 20, job: 'singer', hobbies: [a:'sing']}

I would like to keep the original values of hobbies and overwrite only one of them.
It looks like I have to use spread operator like I have used before, but I have no idea how and where to use it.
Is there any way or better approach to solve this issue?