Delete data in state React Hooks - reactjs

Question

Maybe it is a dumb question, because I don't find any response on the net for this, but I'm trying to update my state after a axios.delete.
When I add data, I do this and it works fine :
const handleAddIncome = () => {
let incomeName = document.getElementById('newIncomeName').value
let incomeAmount = document.getElementById('newIncomeAmount').value
let data = {
[incomeName]: parseInt(incomeAmount)
}
axios({
method: "put",
url: `http://localhost:5000/api/balance/${uid}`,
withCredentials: true,
data: { incomes: { ...userWalletIncomes, ...data } }
}).then(() => {
setUserWalletIncomes({ ...userWalletIncomes, ...data })
})
}
I also added a bouton that delete the key/value, and this is where I'm stuck.
Here is what I tried, but no success :
const handleDeleteIncome = (key) => {
let data = { [key]: "" }
axios({
method: "delete",
url: `http://localhost:5000/api/balanceOneIncome/${uid}`,
data: data
}).then(() => {
data[key] = null
setUserWalletIncomes(...userWalletIncomes, data)
})
}
PS : the axios delete works fine, my database is updated normally. Not the state
Thanks for help !
[EDIT]
Here is my UseEffect :
useEffect(() => {
if (uid !== null) {
axios.get(`http://localhost:5000/api/balance/${uid}`)
.then((res) => {
if (res.data[0].incomes && res.data[0].fees) {
setUserWalletIncomes(res.data[0].incomes)
setUserWalletFees(res.data[0].fees)
} else if (res.data[0].incomes && !res.data[0].fees) {
setUserWalletIncomes(res.data[0].incomes)
setUserWalletFees({ 'cliquez-ici': '' })
} else if (!res.data[0].incomes && res.data[0].fees) {
setUserWalletIncomes({ 'cliquez-ici': '' })
setUserWalletFees(res.data[0].fees)
}
})
}
}, [uid])

Answer 1

For those who need, I finally chose to change my controller in my backend and make it send the new object after the delete.
I just take that response, and set the new state.
Thanks

Answer 2

Because you already have setUserWalletIncomes({ ...userWalletIncomes, ...data }), I expect userWalletIncomes is an object like { name1: value1, name2: value2 }, right?
Then you have setUserWalletIncomes(...userWalletIncomes, data), use array spread on an object is a runtime error because it's not iterable:
let a = { foo: 42 };
console.log(...a); // TypeError: Found non-callable ##iterator
I guess you still wanted to write this:
let data = { [key]: "" };
setUserWalletIncomes({ ...userWalletIncomes, ...data });
But this only sets the key field to an empty string. To remove the field, you can combine the answer from How do I remove a property from a JavaScript object?
const temp = {...userWalletIncomes};
delete temp[key];
setUserWalletIncomes(temp);