Запрос MediaStream, выдающий play(), был прерван новым запросом на загрузку

Браузер выдает эту асинхронную ошибку, когда я пытаюсь воспроизвести видеодорожку медиапотока.

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

Вот мой код:

import { useEffect, useRef, useState } from "react"
import { Link } from "react-router-dom";
import { Room } from "./Room";

export const Landing = () => {
    const [name, setName] = useState("");
    const [localAudioTrack, setLocalAudioTrack] = useState(null);
    const [localVideoTrack, setlocalVideoTrack] = useState(null);
    const videoRef = useRef(null);

    const [joined, setJoined] = useState(false);

    const getCam = async () => {
        const stream = await window.navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        })
        // MediaStream
        const audioTrack = stream.getAudioTracks()[0]
        const videoTrack = stream.getVideoTracks()[0]
        setLocalAudioTrack(audioTrack);
        setlocalVideoTrack(videoTrack);
        if (!videoRef.current) {
            return;
        }
        videoRef.current.srcObject = new MediaStream([videoTrack])
        videoRef.current.play();
        // MediaStream
    }

    useEffect(() => {
        if (videoRef && videoRef.current) {
            getCam()
        }
    }, [videoRef]);

    if (!joined) {
            
    return <div>
            <video autoPlay ref = {videoRef}></video>
            <input type = "text" onChange = {(e) => {
                setName(e.target.value);
            }}>
            </input>
            <button onClick = {() => {
                setJoined(true);
            }}>Join</button>
        </div>
    }

    return <Room name = {name} localAudioTrack = {localAudioTrack} localVideoTrack = {localVideoTrack} />
}

В ссылке в конце исключения упоминается, как обрабатывать .play(), но браузер сообщает, что эта строка вызывает ошибку:

videoRef.current.srcObject = new MediaStream([videoTrack])