مشکل async نبودن useState

سلام
به کد زیر توجه کنید چطوری مشکل async نبودن useState حل کنم؟
الان alert اجرا میشه و مقدار undefined هستش درصورتیکه در خط 17 userID state مقداردهی شده.

import React, { useEffect, useState } from "react";
import axios from "axios";
function Todo() {
  const [todoData, setTodoData] = useState();
  const [userID, setUserID] = useState();
  useEffect(() => {
    getTaskData();
  }, []);
  const getTaskData = async () => {
    const resultRequest = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );
    setTodoData(resultRequest.data);
    setUserID(resultRequest.data.userId);
    await getUserData();
  };
  const getUserData = async () => {
    alert(userID);
    const resultRequest = await axios.get(
      `https://jsonplaceholder.typicode.com/todos/${userID}`
    );
  };
  return (
    <div>
      <div><span>Title:</span><span style={{paddingLeft:"10px"}}>{todoData?.title}</span></div>
      <div><span>userID:</span><span style={{paddingLeft:"10px"}}> {userID}</span></div>
    </div>
  );
}
export default Todo;

import axios from "axios"; import { useEffect, useState } from "react"; function Todo({todoId = 1}) { const [{userId, ...todo}, setTodo] = useState({}); const [user, setUser] = useState(); useEffect(() => { const getTaskData = async () => { const response = await axios.get( `https://jsonplaceholder.typicode.com/todos/${todoId}` ); setTodo(response.data); }; getTaskData(); }, [todoId]); useEffect(() => { if (userId) { const getUserData = async () => { const reponse = await axios.get( `https://jsonplaceholder.typicode.com/users/${userId}` ); setUser(reponse.data) }; getUserData() } }, [userId]) return ( <div> <div><span>Title:</span><span style={{paddingLeft:"10px"}}>{todo?.title}</span></div> <div><span>userID:</span><span style={{paddingLeft:"10px"}}> {user?.name}</span></div> </div> ); } export default Todo;