Программируемое видео Twilio: при изменении доминирующего динамика кажется, что звук становится громче и становится статичным.

Я реализовал интерфейс таким образом, что dominantSpeaker включено отображение своей картинки в главном окне, но всегда слышно всех участников. Чтобы добиться этого, мне пришлось закомментировать audioTrack.detach() в useEffect() Проблема, с которой я столкнулся, заключается в том, что каждый раз, когда dominantSpeaker изменяется, кажется, что их громкость усиливается и начинают создаваться помехи. Он становится все хуже, пока его не слышно, и в этот момент, когда я перезагружаю страницу, звук фиксируется для меня. У всех участников одна и та же проблема, и проблема решается только для того, кто обновляет страницу. Даже когда все пользователи отключены, помехи сохраняются. Когда я захожу в консоль и удаляю все теги и, статика все еще сохраняется.

Я передаю реквизит компоненту-участнику, который верен, если это dominant_window. Я делаю это, потому что хотел, чтобы звук каждого отдельного выступающего исходил из их небольшого окна участника, что позволяло одновременно передавать несколько аудиопотоков. Когда я комментирую участника, который является доминирующим_окном, я не слышу звука, хотя он вообще не отображает тег.

Я пытался отрендерить его без компонентов <audio> и <video>, но звук все равно слышен. Это наводит меня на мысль, что звук исходит не из аудиотега, который я устанавливаю. Я предполагаю, что, поскольку я закомментировал audioTrack.detach(), он снова и снова добавляет один и тот же audioTrack ко всему, что управляет звуком, тем самым увеличивая громкость (хотя это не объясняет статические помехи, когда все отключены), но когда это там я могу получить звук только 1 участника за раз.

Откуда именно идет звук? Как мне контролировать что бы/где бы это ни было? Как обеспечить, чтобы audioTrack добавлялся только один раз для каждого человека, если это отдельный элемент, контролирующий все аудио и позволяющий всем говорить одновременно с помощью dominantSpeaker?

Участник.js

import React, {useState, useEffect, useRef} from 'react';

const Participant = ({  key,
                         dominant_window,
                         user,
                         participant,
                         width,
                         videoEnabled,
                         audioEnabled,
                         onMouseEnter,
                         onMouseLeave,
                         is_fullscreen,
                         tiled,
                     }) => {
    const [videoTracks, setVideoTracks] = useState([]);
    const [audioTracks, setAudioTracks] = useState([]);
    const [hovered, setHovered] = useState(false);

    const videoRef = useRef();
    const audioRef = useRef();

    const trackpubsToTracks = trackMap => {
        const tracks = Array.from(trackMap.values()).map(publication => publication.track);
        return tracks;
    };

    const handleTrackChange =
        useEffect(() => {
            const trackSubscribed = track => {
                if (track.kind === 'video') {
                    setVideoTracks(videoTracks => [...videoTracks, track]);
                } else {
                    setAudioTracks(audioTracks => [...audioTracks, track]);
                }
            };

            const trackUnsubscribed = track => {
                if (track.kind === 'video') {
                    setVideoTracks(videoTracks => videoTracks.filter(v => v !== track));
                } else {
                    setAudioTracks(audioTracks => audioTracks.filter(a => a !== track));
                }
            };
            setVideoTracks(trackpubsToTracks(participant.videoTracks));
            setAudioTracks(trackpubsToTracks(participant.audioTracks));

            participant.on('trackSubscribed', trackSubscribed);
            participant.on('trackUnsubscribed', trackUnsubscribed);

            return () => {
                setVideoTracks([]);
                setAudioTracks([]);
            };
        }, [participant]);

    useEffect(() => {
        const videoTrack = videoTracks[0];
        if (videoTrack) {
            videoTrack.attach(videoRef.current);
            return () => {
                //videoTrack.detach();
            };
        }
    }, [videoTracks]);


    useEffect(() => {
        const audioTrack = audioTracks[0];

        if (audioTrack) {
            audioTrack.attach(audioRef.current);
            return () => {
                //audioTrack.detach();
            };
        }
    }, [audioTracks]);
    
    return (
        <div key={key}
             onMouseEnter={() => {
                 if (onMouseEnter) onMouseEnter();
                 setHovered(true)
             }}
             onMouseLeave={() => {
                 if (onMouseLeave) onMouseLeave();
                 setHovered(false)
             }}
        >

            <video className='participant-video'
                    ref={videoRef}
                    autoPlay={true}
                    style={{
                        transform: participant.identity == `u_${user.id}` ? "scaleX(-1)" : "scaleX(1)",
                        opacity: videoEnabled ? "1" : "0",
                        zIndex: videoEnabled ? "1" : "-1"
                    }}/>
            {(audioEnabled && !dominant_window && !(participant.identity == `u_${user.id}`)) && <audio ref={audioRef} autoPlay={true} muted={false}/>}
        </div>
    );
};

export default Participant;