Sample 6a) ReactWebChat component - Avatar's not displaying

Is it an issue related to Adaptive Cards?

Is this an accessibility issue?

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest)

Which area does this issue affect?

Customization: Branding

What is the public URL for the website?

No response

Please describe the bug

The ReactWebChat component does not display the bot or user avatar, despite provided the appropriate styling.

Do you see any errors in console log?

Warning: Cannot update a component (`ActivityAcknowledgementComposer`) while rendering a different component (`InternalTranscriptScrollable`). To locate the bad setState() call inside `InternalTranscriptScrollable`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at InternalTranscriptScrollable (http://localhost:3000/static/js/bundle.js:61892:25)
    at div
    at http://localhost:3000/static/js/bundle.js:61488:36
    at Composer (http://localhost:3000/static/js/bundle.js:218008:29)
    at TranscriptFocusComposer (http://localhost:3000/static/js/bundle.js:84507:23)
    at BasicTranscript (http://localhost:3000/static/js/bundle.js:62108:26)
    at div
    at Surface (http://localhost:3000/static/js/bundle.js:74780:23)
    at BasicWebChat (http://localhost:3000/static/js/bundle.js:62375:24)
    at SendBoxComposer (http://localhost:3000/static/js/bundle.js:84989:23)
    at http://localhost:3000/static/js/bundle.js:83765:23
    at div
    at http://localhost:3000/static/js/bundle.js:62665:23
    at Composer (http://localhost:3000/static/js/bundle.js:215675:70)
    at ComposerCore (http://localhost:3000/static/js/bundle.js:62680:24)
    at ActivityTreeComposer (http://localhost:3000/static/js/bundle.js:82699:23)
    at ActivitySendStatusComposer (http://localhost:3000/static/js/bundle.js:52984:23)
    at ComposerCore (http://localhost:3000/static/js/bundle.js:44427:34)
    at ActivityAcknowledgementComposer (http://localhost:3000/static/js/bundle.js:51856:23)
    at ActivityKeyerComposer (http://localhost:3000/static/js/bundle.js:52294:23)
    at Provider (http://localhost:3000/static/js/bundle.js:213389:20)
    at ComposerWithStore (http://localhost:3000/static/js/bundle.js:44813:28)
    at PonyfillComposer (http://localhost:3000/static/js/bundle.js:53394:23)
    at RenderChildrenFunction (http://localhost:3000/static/js/bundle.js:50760:23)
    at ErrorBoundary (http://localhost:3000/static/js/bundle.js:50768:5)
    at Composer (http://localhost:3000/static/js/bundle.js:44863:39)
    at Composer (http://localhost:3000/static/js/bundle.js:62837:34)
    at ReactWebChat (http://localhost:3000/static/js/bundle.js:65876:24)
    at AdaptiveCardsComposer (http://localhost:3000/static/js/bundle.js:93314:38)
    at AddFullBundle (http://localhost:3000/static/js/bundle.js:93073:37)
    at FullReactWebChat
    at WebChat (http://localhost:3000/static/js/bundle.js:331:3)
    at div
    at div
    at MinimizableWebChat (http://localhost:3000/static/js/bundle.js:127:63)
    at div
    at App

How to reproduce the issue?

npm install and npm start the sample here - 06.recomposing-ui/a.minimizable-web-chat/
Ensure the sample is running locally (http://localhost:3000/)

In WebChat.js, replace from line 9-15 with this:

const styleSet = useMemo(
    () =>
      createStyleSet({
        bubbleBackground: '#e8e8e8',
        bubbleTextColor: '#FFFFFF',
        bubbleBorderRadius: 5,
        bubbleFromUserBackground: '#0184D7',
        bubbleFromUserBorderRadius: 5,
        backgroundColor: 'Transparent',
        botAvatarImage:
          'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
        botAvatarInitials: 'Bot',
        userAvatarImage: 'https://github.com/compulim.png?size=64',
        userAvatarInitials: 'User'
      }),
    []
  );

In Chrome open http://localhost:3000/
Type a message in the chat and send it
Notice that the avatars are not appearing, but the other styles (bubble text and background colors) specified are appearing

What do you expect?

Both the bot and the user avatar to appear.

What actually happened?

The avatars for both the bot and the user are hidden.

Do you have any screenshots or recordings to repro the issue?

Adaptive Card JSON