diff --git a/frontend/src/components/common/user-avatar/user-avatar-for-username.tsx b/frontend/src/components/common/user-avatar/user-avatar-for-username.tsx
index 7a282a9cb..fc54d33fa 100644
--- a/frontend/src/components/common/user-avatar/user-avatar-for-username.tsx
+++ b/frontend/src/components/common/user-avatar/user-avatar-for-username.tsx
@@ -10,6 +10,7 @@ import { UserAvatar } from './user-avatar'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAsync } from 'react-use'
+import type { UserInfo } from '../../../api/users/types'
 
 export interface UserAvatarForUsernameProps extends Omit<UserAvatarProps, 'photoUrl' | 'displayName'> {
   username: string | null
@@ -26,11 +27,12 @@ export interface UserAvatarForUsernameProps extends Omit<UserAvatarProps, 'photo
  */
 export const UserAvatarForUsername: React.FC<UserAvatarForUsernameProps> = ({ username, ...props }) => {
   const { t } = useTranslation()
-  const { error, value, loading } = useAsync(async (): Promise<{ displayName: string; photo?: string }> => {
+  const { error, value, loading } = useAsync(async (): Promise<UserInfo> => {
     return username
       ? await getUserInfo(username)
       : {
-          displayName: t('common.guestUser')
+          displayName: t('common.guestUser'),
+          username: ''
         }
   }, [username, t])
 
@@ -38,7 +40,7 @@ export const UserAvatarForUsername: React.FC<UserAvatarForUsernameProps> = ({ us
     if (!value) {
       return null
     }
-    return <UserAvatar displayName={value.displayName} photoUrl={value.photo} username={username} {...props} />
+    return <UserAvatar displayName={value.displayName} photoUrl={value.photoUrl} username={username} {...props} />
   }, [props, value, username])
 
   return (