Function is showing undefined value but in console its showing result

Question

I have two functions one is main function and another one is api calling function in which I am calling Api in this function actually it is showing result in console but when I am calling this function inside main function then its showing undefined value.

Below is my code:

async mainFun(){

    this.logger.log("in main function");
    const dat = await this.apiFun();
    this.logger.warn(dat);  // Here its showing undefined
} 

async apiFun = () =>{
    const url = 'https://reqres.in/api/unknown';
    axios.get(url).then((response) => {
     this.logger.log("In nameFun " + response.data.total);
     return response.data.total;
    }).catch((error) => {
       this.logger.log(error);
    });
}

Someone let me know why its showing undefined value.