fetching data returns undefined in useEffect

Question

  async function fetchName() {
    const api = "https://jsonplaceholder.typicode.com/users";

    const response = await axios.get(api);
    setUserData(
      response.data.map((e) => {
        return {
          id: e.id,
          name: e.name,
          username: e.username,
        };
      })
    );
    let random = Math.floor(Math.random() * userData.length);
    setName(userData[random].username);
    missedLet(userData[random].username);
    setHintName(userData[random].name);
    console.log("nickname is ", userData[random].username);
  }

  useEffect(() => {
    fetchName();
  }, []);

When I call the fetName() function separately, it works correctly, but in useEffect it returns initial state of each state variable.

Also in console its:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'username')
    at getName