REACT: Updating nested state-CodePudding

I have two sets of data. Both are saved in a states.I want to update the rowsData inside the data1 state based on the values in data2 state. The "row" value in the data2 object refers to the "id" of rowsData in the data1 state and columns in the data2 refers to any data beside id in the rowsData object in data1. I want to pick "row" and "column" from data2 and cahnge the respective data inside rowsData in data1.

let tableData = {
 columnsDef: [
   { title: "id",field: "id",className: "header-style" },
   { title: "First_name", field: "First_name", className: "header-style" },
   { title: "Last_name", field: "Last_name", className: "header-style" },
   { title: "Email", field: "Email", className: "header-style" },
 ],

rowsData:[
   { id: "1", First_name: "Donald", Last_name: "OConnell", Email: "DOCONNEL" },
   { id: "2", First_name: "Douglas", Last_name: "Grant", Email: "DGRANT" },
   { id: "3", First_name: "Jennifer", Last_name: "Whalen", Email: "JWHALEN" },
   { id: "4", First_name: "Michael", Last_name: "Hartstein", Email: "MHARTSTE" },
   { id: "5", First_name: "Pat", Last_name: "Fay", Email: "PFAY" },
   { id: "6", First_name: "Susan", Last_name: "Mavris", Email: "SMAVRIS" },
   { id: "7", First_name: "Hermann", Last_name: "Baer", Email: "HBAER" }
 ],

file: [
   { file: { path: "dummy_data_3 .csv"}}
 ],
}


let updatedTableData = [
    { "row": 2, "column": "Email", "oldValue": "DGRANT", "newValue": "DGRANT UPDATED" },
    { "row": 6, "column": "First_name", "oldValue": "Susan", "newValue": "SUSAN UPDATED" },
    { "row": 4, "column": "Last_name", "oldValue": "Hartstein", "newValue": "Hartstein UPDATED" }
]

const [data1, setData1] = useState(tableData)
const [data2, setData2] = useState(updatedTableData)

Here is the codesandbox link for the issue.