The AccountTeamMember widget (Lightning Component) displays the Role API Name instead of the Role Label.

How do i change the lightning component so it will display the role label instead of the role API name?

Here is the component code:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AccountTeamHelper">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="TeamMembers" type="AccountTeamMember[]" /> 	  
    <lightning:card title="Account Team" iconName="custom:custom103">
        <div style="margin: 0px 5px">
            <p class="slds-p-horizontal_small">
                <aura:if isTrue="{!v.TeamMembers.length > 0}">
                <aura:iteration items="{!v.TeamMembers}" var="member">
                    <!-- <span style="display: inline-block; margin: 3px;"><lightning:avatar src="{!member.User.SmallPhotoUrl}" alternativeText="(Avatar)" fallbackIconName="standard:avatar" variant="circle" /></span> -->
                    <span><a href="{!'/one/one.app#/sObject/' + member.User.Id + '/view'}">{!member.User.FirstName}&nbsp;{!member.User.LastName}</a> - {!member.TeamMemberRole}</span><br/>
                </aura:iteration>
                <aura:set attribute="else">
                    No account team members have been assigned to this account.
                </aura:set>
                </aura:if>
        	</p>
        </div>
    </lightning:card>
</aura:component>