How to use the mattermost-redux/utils/user_utils.displayUsername function in mattermost-redux

return function mapStateToProps(state, ownProps) {
        const config = getConfig(state);
        const post = ownProps.post;
        const commentedOnUser = getUser(state, ownProps.commentedOnUserId);
        const user = getUser(state, post.user_id) || {};
        const currentUser = getCurrentUser(state);
        const teammateNameDisplay = getTeammateNameDisplaySetting(state);
        const militaryTime = getBool(state, Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
        const enableTimezone = isTimezoneEnabled(state);
        const userTimezone = enableTimezone ? getUserCurrentTimezone(currentUser.timezone) : '';

        return {
            commentedOnDisplayName: ownProps.commentedOnUserId ? displayUsername(commentedOnUser, teammateNameDisplay) : '',
            commentCount: getCommentCountForPost(state, {post}),
            createAt: post.create_at,
            displayName: displayUsername(user, teammateNameDisplay),
            enablePostUsernameOverride: config.EnablePostUsernameOverride === 'true',
            fromWebHook: post?.props?.from_webhook === 'true', // eslint-disable-line camelcase
            militaryTime,
            isPendingOrFailedPost: isPostPendingOrFailed(post),
            isSystemMessage: isSystemMessage(post),
            fromAutoResponder: fromAutoResponder(post),
            overrideUsername: post?.props?.override_username, // eslint-disable-line camelcase
            theme: getTheme(state),
            username: user.username,
            isBot: user.is_bot || false,
            isGuest: isGuest(user),
            isLandscape: isLandscape(state),
            userTimezone,
        };
    };
}

return function mapStateToProps(state, ownProps) {
        const config = getConfig(state);
        const post = ownProps.post;
        const commentedOnUser = getUser(state, ownProps.commentedOnUserId);
        const user = getUser(state, post.user_id) || {};
        const currentUser = getCurrentUser(state);
        const teammateNameDisplay = getTeammateNameDisplaySetting(state);
        const militaryTime = getBool(state, Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time');
        const enableTimezone = isTimezoneEnabled(state);
        const userTimezone = enableTimezone ? getUserCurrentTimezone(currentUser.timezone) : '';

        return {
            commentedOnDisplayName: ownProps.commentedOnUserId ? displayUsername(commentedOnUser, teammateNameDisplay) : '',
            commentCount: getCommentCountForPost(state, {post}),
            createAt: post.create_at,
            displayName: displayUsername(user, teammateNameDisplay),
            enablePostUsernameOverride: config.EnablePostUsernameOverride === 'true',
            fromWebHook: post?.props?.from_webhook === 'true', // eslint-disable-line camelcase
            militaryTime,
            isPendingOrFailedPost: isPostPendingOrFailed(post),
            isSystemMessage: isSystemMessage(post),
            fromAutoResponder: fromAutoResponder(post),
            overrideUsername: post?.props?.override_username, // eslint-disable-line camelcase
            theme: getTheme(state),
            username: user.username,
            isBot: user.is_bot || false,
            isGuest: isGuest(user),
            isLandscape: isLandscape(state),
            userTimezone,

sectionKeyExtractor = (user) => {
        // Group items alphabetically by first letter
        return displayUsername(user, this.props.teammateNameDisplay)[0].toUpperCase();
    }

const dms = [...directChannelUsers, ...pastDirectMessageUsers].map((u) => {
            const displayName = displayUsername(u, teammateNameDisplay, false);

            return {
                id: u.id,
                status: statuses[u.id],
                display_name: displayName,
                username: u.username,
                email: u.email,
                type: General.DM_CHANNEL,
                fake: true,
                nickname: u.nickname,
                fullname: `${u.first_name} ${u.last_name}`,
                delete_at: u.delete_at,
                isBot: u.is_bot,

                // need name key for DM's as we use it for sortChannelsByDisplayName with same display_name
                name: displayName,

return function mapStateToProps(state, ownProps) {
        const commentedOnUser = ownProps.commentedOnPost ? getUser(state, ownProps.commentedOnPost.user_id) : null;
        const user = getUser(state, ownProps.post.user_id);
        const myPreferences = getMyPreferences(state);
        const {config, license} = state.entities.general;
        const roles = getCurrentUserId(state) ? getCurrentUserRoles(state) : '';

        return {
            ...ownProps,
            config,
            commentCount: getCommentCountForPost(state, ownProps),
            commentedOnDisplayName: displayUsername(commentedOnUser, myPreferences),
            currentTeamId: getCurrentTeamId(state),
            currentUserId: getCurrentUserId(state),
            displayName: displayUsername(user, myPreferences),
            isFlagged: isPostFlagged(ownProps.post.id, myPreferences),
            license,
            roles,
            theme: getTheme(state),
            user
        };
    };
}

const channel = ownProps.channel || getChannel(state, {id: ownProps.channelId});
        const member = getMyChannelMember(state, channel.id);
        const currentUserId = getCurrentUserId(state);
        const channelDraft = getDraftForChannel(state, channel.id);

        let displayName = channel.display_name;
        let isBot = false;

        if (channel.type === General.DM_CHANNEL) {
            if (ownProps.isSearchResult) {
                isBot = Boolean(channel.isBot);
            } else {
                const teammateId = getUserIdFromChannelName(currentUserId, channel.name);
                const teammate = getUser(state, teammateId);
                const teammateNameDisplay = getTeammateNameDisplaySetting(state);
                displayName = displayUsername(teammate, teammateNameDisplay, false);
                if (teammate && teammate.is_bot) {
                    isBot = true;
                }
            }
        }

        const currentChannelId = getCurrentChannelId(state);
        const isActive = ownProps.channelId === currentChannelId;

        let shouldHideChannel = false;
        if (
            channel.name === General.DEFAULT_CHANNEL &&
            !isActive &&
            !ownProps.isFavorite &&
            !ownProps.isSearchResult &&
            shouldHideDefaultChannel(state, channel)

user,
            isLandscape,
        } = this.props;

        const {id, username} = user;
        const style = getStyleFromTheme(theme);

        let usernameDisplay = `@${username}`;
        if (isMyUser) {
            usernameDisplay = formatMessage({
                id: 'mobile.more_dms.you',
                defaultMessage: '@{username} - you',
            }, {username});
        }

        const teammateDisplay = displayUsername(user, teammateNameDisplay);
        const showTeammateDisplay = teammateDisplay !== username;

        return (

getNotificationUserName = () => {
        const {config, notification, teammateNameDisplay, user} = this.props;
        const {data} = notification;

        let userName;
        if (data.override_username && config.EnablePostUsernameOverride === 'true') {
            userName = (
                
            );
        } else if (user) {
            userName = (
                
            );
        }

        return userName;
    };

onHide={this.hideOverlay}
                >
                    
                
                <a>
                    {'@' + displayUsername(user, this.props.teammateNameDisplay)}
                </a>
                {suffix}
            
        );
    }
}

getDisplayName = () => {
        const {theme, teammateNameDisplay, user} = this.props;
        const style = createStyleSheet(theme);

        const displayName = displayUsername(user, teammateNameDisplay);

        if (displayName) {
            return (