Why doesn't my React Custom Jitsi UI render multiple video and audio tracks (unlike this Vue js example)?

I am having an issue trying to create a custom Jitsi UI. When I load my conference in my React app, I only receive one video and one audio track (for a total of two tracks). When I then attempt to join the same conference, I still only receive one video. I have tried following this guide on how to build a custom Jitsi UI in Vue and tried to convert it to React. The guide adds the video and audio tracks to a list of video and audio HTML5 elements. However, the guide’s author’s implementation works, when using the same Jitsi conference, while mine fails to load multiple tracks. Due to the Vue implementation working (and the React code having everything the same apart from adding the tracks to the video/audio elements), I conclude that it must be my React implementation that is the problem. Here is how the author rendered the multiple tracks (in Vue):

  <div id="app">
    <button @click="connect">Connect</button>
      v-for="track in videoTracks"
      v-for="track in audioTracks"

Here is the logic that the author used to add tracks to the video elements:

addTrack(track) {
      if (track.getType() === "video") {
      } else if (track.getType() === "audio") {
      this.$nextTick().then(() => {

Here is my attempt to implement the same logic in React:

const videoRefs = React.useRef([]);
const addTrack = (track) => {
    console.log(`addTrack's track: ${track}`);
    if (track.getType() === 'video') {
      videoRefs.current[videoRefs.current.length - 1].current.srcObject =
    } else if (track.getType() === 'audio') {
if (videoRefs.current.length !== videoTracks.length) {
    videoRefs.current = Array(videoTracks.length)
      .map((_, i) => videoRefs.current[i] || createRef());

Here is how I am trying to render the multiple tracks:

{videoTracks.map((track, i) => (

Any help would be appreciated, thank you.