How to get the user fields in a theme component?

We are trying to create the widget (“banner-title”) which will display the first-name of the User (we have created first-name as user field).
In the widget, we are fetching the user first name (user_field) using the below code:

let res [];
let currentUser = api.getCurrentUser();
let userfields  = null;
if (currentUser) {
    api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
       userfields =  user.user_fields;

  if(userfields ){
   //some code
   return res;

Here find() executes in an async manner so the problem is every time we are getting user fields as null. how to get the user fields in a synchronized manner so we can get the value of userfields before the widget is rendered.