How can I update state immediately inside a submit handler? - fetch

Question

i'm trying to run 3 fetch requests to an API in an submit handler in React, and use the data that is returned from the first two fetch request in a third fetch within the same submit event. The problem i'm running into is that the State is not immediately updating from the first two fetch requests, and when it comes to the third, the state that is coming into "dbtask" for category_id and user_id, comes in as undefined. Outside the body of the handler function the state shows correctly, How can I change this so that the state will proprerly update "dbtask"?
function submitHandler(e){
e.preventDefault()
const [fname, lname] = submission.name.split(' ');
const fullname = {
first_name: `${fname}`,
last_name: `${lname}`,
}
const dbcategory = {
category_name: submission.category
}
//Post method for users
fetch("http://localhost:9292/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(fullname),
})
.then((r) => r.json())
.then((newUser) => {
setNewUser({newUser}, () => {
console.log(newUser)
});
})
console.log(newUser)
// Post method for categories
fetch("http://localhost:9292/categories", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(dbcategory),
})
.then((r) => r.json())
.then((newCategory) => {
setNewCategory({newCategory}, () => {
console.log(newCategory)
});
})
console.log(newCategory)
const dbtask = {
task_name: submission.task,
category_id: newCategory.id,
user_id: newUser.id
}
console.log(dbtask)
fetch("http://localhost:9292/tasks", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(dbtask),
})
.then((r) => r.json())
.then((newTask) => {
setNewTask(newTask)
})
console.log(newTask)
setTasks(tasks => [...tasks, newTask])
}