Calling an asynchronous operation in a map function

Question

I am running a map function on an array of object named channelList,i am checking for two conditions for each object in the array,if one condition is satisfied then i am simply return a React component,this part works fine.The problem is the other if condition,in which i am calling a promise,and after getting the result from this promise,i am returning the React element.So the map function doesn't wait for the promise result in the second if condition,it goes on with it's synchronous operation for the next object,i am getting the desired result from the other condition but not from the async operation condition ,so what can i do to make the map function pause for the result of the promise so that i can get the desired result.

{channelList.map((channel) => 
            {
              console.log(channel);
              const channelMetaData = JSON.parse(channel?.Metadata);
              console.log(channelMetaData);  

              //If this condition is satisfied,go for an async operation,and then return.
              if(channelMetaData?.isOneToOne){
                listChannelMemberships(channel.ChannelArn,userId).then(async (res)=>{
                  if(res[0].Member.Name==userData.username){
                    console.log("I am this user",res[0].Member.Name);
                    var otherPerson = res[1].Member.Name;
                  }else if(res[1].Member.Name==userData.username){
                    console.log("I am this user",res[1].Member.Name);
                    var otherPerson = res[0].Member.Name;
                  }
                  console.log(otherPerson);
                  return <ChannelItem
                    key={channel.ChannelArn}
                    name={channel.Name}
                    actions={loadUserActions(userPermission.role, channel)}
                    isSelected={channel.ChannelArn === activeChannel.ChannelArn}
                    onClick={e => {
                      e.stopPropagation();
                      channelIdChangeHandler(channel.ChannelArn);
                    }}
                    unread={unreadChannels.includes(channel.ChannelArn)}
                    unreadBadgeLabel="New"
                    >
                    </ChannelItem>
                  })
             }
             //Or else,go for this condition.
             else{
              return <ChannelItem
              key={channel.ChannelArn}
              name={channel.Name}
              actions={loadUserActions(userPermission.role, channel)}
              isSelected={channel.ChannelArn === activeChannel.ChannelArn}
              onClick={e => {
                e.stopPropagation();
                channelIdChangeHandler(channel.ChannelArn);
              }}
              unread={unreadChannels.includes(channel.ChannelArn)}
              unreadBadgeLabel="New"
              >
              </ChannelItem>
             }