I have two functions, one which creates an User Plan and another which creates an UserGoal. Inside the first function I want to set the UserPlanId in order to use it in the second function. Both these functions are called inside a handleSubmit function.

However, I don't know if it is possible to make that work. I tried many things but none worked for getting the updated state inside the second function.

const handleSubmit = async (event) => {
event.preventDefault();
const resp = await axios
  .post("https://localhost:44325/UserPlans/create", {
    bmi: bmi,
    totalCalories: parseInt(totalCalories),
    totalCarbs: parseInt(carbs),
    totalProtein: parseInt(protein),
    totalFat: parseInt(fat),
  })
  .then((response) => {
    console.log(response.data);
    setUserPlan(response.data);
    setUserPlanId(response.data.id);

  })
  .catch((error) => {
    console.log(error.response.data);
  });

await axios
  .post("https://localhost:44325/UserGoals/create", {
    Goal: goalInt,
    GoalWeight: kilosGoal,
    UserActivity: activityInt,
    UserPlanId: userPlanId, // HERE I WANT THE UPDATED STATE
  });}

Are there any options for doing this?