Please note: I m posting this question becuase I could not find a soultion to my problem from similar other questions. Any help in this regard would be gretaly appreciated.

I have a function:

const getUsenameProps =  (id: string) => {
    const userNameProps: IUserName = {
    friendName : getFriendName(id).toString(),
    friendId : id
    }
    console.log("AAAAAAAAAAAAA", userNameProps) //{friendName: Promise<string>, friendId: 1}
    return userNameProps
}

and the called function is like this

export const getFriendName =  async (id: string) => {
    const friendContact = await getUserData(arrayArgument,id)
    const friendName = friendContact && friendContact .id !== "" ?  friendContact .name : ""
    console.log("friendame") //sam
    return friendName 
}

Now, when I call the getUsernameProps(), it inturn calls the getFriendName() and this makes an API call. The console.log in getFriendName() prints a normal string ("sam"), and I am returning this. But when this is called in getUserNameProps, the value it is getting back is a Promise. I want to set userNameProps.friendName to the friendName value ("sam") returned in fetFriendName.

Please help