Username missing when more than one user join the same call

[rajatShr]

Hi All
I'm using agora-react-web-uikit (v1.0.8) with plain JavaScript.
However, when more than one user join the same call, the username is not displayed. Please refer to the screenshot and code below for details. And also showPopUpBeforeRemoteMute is not working.
Your advice would be appreciated.
Thanks.

`

<script src="js/agora/agora-uikit.js" ></script>

<!-- -->
<agora-react-web-uikit
    style="width: 100%; height: 100vh; display: flex;"
    appId="{{ app_id }}"
    channel="{{ channel }}"
    token="{{ token }}"
    uid="{{ meeting_id }}"
    displayUsername=true
    username="{{ username }}"
    showPopUpBeforeRemoteMute="true"
    layout="1"
/>
<script>
    var meeting_index_url = "{% url 'classRoom:leave-meeting' subject.id %}";

    const el = document.querySelector('agora-react-web-uikit');
   
    el.addEventListener('agoraUIKitEndcall', (e) => {
        // handle endcall event
        el.remove();

        window.open(meeting_index_url, '_self')
    });
</script>

`