Getting response from nested Async funtion in React [duplicate]

I have 3 function to login a user on my React web application.

1. Function C: Calling Login function from Login HTML Page

 const handleLogin = (e) => {
        e.preventDefault();

        //  Calling FUNCTION B
        loginUser({ email, password }).then((value) => console.log('in promise then : ' + value));
    
        console.log('in login page: ' + response);
    };

2. Function B: Making authorization

export async function loginUser(loginPayload) {

     //  Calling FUNCTION C
     AuthDataService.login(loginPayload)
      .then((response) => {
          var modifiedResponse = response;
          console.log('in AuthDataService: ' + JSON.stringify(modifiedResponse));
          return modifiedResponse;
      });
}

3. Function A: Calling Server

class AuthDataService {
  async login(data) {
    return await http.post('/login', data).then((response) => {
        return response;
    });
  }
}

Problem is that, in Function B response is logged correctly but in Function A response(value) is undefined. Shouldn't function C wait until Function B is finished? What should I change?

You are not returning anything from loginUser function.

NOTE: No need for async if are using .then

Refactoring you can do like below

export function loginUser(loginPayload) {
  //  Calling FUNCTION C
  return AuthDataService.login(loginPayload).then((response) => {
    var modifiedResponse = response;
    return data; // not sure from where it's coming
  });
}

class: no need to then if you are not doing anything with response.

login(data) {
    return http.post('/login', data);
}