Chat thread not rendering when changing chat thread id

[jorgecolon413]

I'm trying to build a chat from the ChatComposite from the UI ACS library. I'm currently generating a list of chat threads where the user can click the list item and change the thread id for the ChatComposite with a useState function and props for the composite. At first render, the ChatComposite works as expected, where you as the user can click a list item and the ChatComposite renders the chat with its thread. But then, if you click another list item to render the ChatComposite with a new thread id, the ChatComposite updates its topic but it does not load the chat thread. It even lets you send messages and the stores the new message in the correct thread.

Here is the list item where I grab the thread id and set the value as prop for the Chat Component where the ChatComposite resides:
`
const Chat = () => {
const [chatId, setChatId] = useState();
const { userToken } = useUserToken(USER_ID);
const { chatList } = useGetChatList(userToken);

const selectChat = (chatId) => {
    console.log(`Selected Chat: ${chatId}`);
    setChatId(chatId);
}

return (
    <>
        {userToken && chatList &&
            <div className="row container">
                <div className="col-4 ">
                    <ul style={{ listStyle: 'none' }}>
                        {chatList.map(chat =>

                            <li key={chat.id} className="p-2 border-bottom" onClick={() => selectChat(chat.id)}> <a href="#!" className="d-flex justify-content-between"><div className="d-flex flex-row"><div className="pt-1"><p className="fw-bold mb-0">{chat.topic}</p></div></div><div className="pt-1"><p className="small text-muted mb-1">{chat.lastMessageReceivedOn}</p></div></a></li >
                        )}                           
                    </ul>
                </div>
                <div className="col-8">
                    {chatId &&
                        <ChatComponent userId={USER_ID} userToken={userToken} threadId={chatId} endpoint={ENDPOINT_URL} displayName={"Jorge Colon"} />
                    }
                </div>
            </div>
        }
    </>
)

}

export default Chat;
`

Here is the ChatComponent where I construct the chatAdapters from the props:

` const ChatComponent = (props) => {
// A well-formed token is required to initialize the chat and calling adapters.
//const { endpointUrl, userId, token, displayName, groupId, threadId } = useAzureCommunicationServiceArgs();

const credential = useMemo(() => {
    try {
        return new AzureCommunicationTokenCredential(props.userToken);
    } catch {
        console.error('Failed to construct token credential');
        return undefined;
    }
}, [props.userToken]);

// Memoize arguments to `useAzureCommunicationChatAdapter` so that
// a new adapter is only created when an argument change              
const chatAdapterArgs = useMemo(
    () => ({
        endpoint: props.endpoint,
        userId: props.userId,
        displayName: props.displayName,
        credential,
        threadId: props.threadId
    }),
    [props.endpoint, props.userId, props.displayName, credential, props.threadId]
);

const chatAdapter = useAzureCommunicationChatAdapter(chatAdapterArgs);

if (!!chatAdapter) {
    return (
        <div style={{ height: '100vh', display: 'flex' }}>
            <div style={containerStyle}>
                <FluentThemeProvider>
                    <ChatComposite adapter={chatAdapter} />
                </FluentThemeProvider>
            </div>
          
        </div>
    );
}
if (credential === undefined) {
    return <h3>Failed to construct credential. Provided token is malformed.</h3>;
}
return <h3>Initializing...</h3>;

} `
There is no error relating to this on the devtools neither.

[jorgecolon413]

Solve by adding

chatAdapter.loadPreviousChatMessages(20);

where one renders the ChatComposite