avatarUrl not working for conversation list.

[nomanshahzad]

I am trying to display the profile photo as the avatar for each contact in the conversation list. However, when I set the avatarUrl prop for the conversation list, it doesn’t seem to work, and the value appears as undefined.
Could anyone suggest any alternative solutions or workarounds for this?

Below are my code snippets:

import React, { useState, useEffect } from 'react';
import { UIKitProvider, Chat, ConversationList, useClient, rootStore, ConversationItem, Avatar } from 'agora-chat-uikit';
import 'agora-chat-uikit/style.css';
const appKey = '611181437#1368525';


for (const contact of contacts) {
            const name = contactsAttributes[contact].nickname
            rootStore.conversationStore.addConversation({
              chatType: "singleChat",
              conversationId: contact,
              name,
              avatarUrl: "https://picsum.photos/200/300",
              lastMessage: {},
              unreadCount: ""
            });
          }
          
<div className="flex w-full" style={{ height: 'calc(100vh - 196px)' }}>
      <div className="border-r" style={{ width: '500px' }}>
        <ConversationList />
      </div>

      <div className="flex-1">
        <Chat />
      </div>
    </div>
    

[myZhangDong]

getUserInfo(userIds).then(usersInfo => {
//usersInfo: {[userId]: {avatarurl: '', nickname: '', userId: ''}}
rootStore.addressStore.setAppUserInfo(usersInfo);
});
You can set the avatar and nickname using method setAppUserInfo