I have a different component that is responsible for streaming and this component is for listing the streams out so eventually they can be selected. the problem here is the streams are here in the event object but I can't view them the peerConnection.ontrack actually working because I was able to get the streams. but the problem is the srcObject uncaught TypeError: Cannot add property srcObject, object is not extensible that is the error it returning

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

import  { io }  from 'socket.io-client'
const socket = io('http://localhost:8080')


let peerConnection;



const Watcher = () => {
  const [myStream, setStream] = useState([]);

  const appCxt = useContext(AppContext)

  const myVideo = useRef(null)
  const config = appCxt.config

  useEffect(() => {

    socket.on("offer", (id, description) => {

      peerConnection = new RTCPeerConnection(config);
      peerConnection
        .setRemoteDescription(description)
        .then(() => peerConnection.createAnswer())
        .then(sdp => peerConnection.setLocalDescription(sdp))
        .then(() => {
          socket.emit("answer", id, peerConnection.localDescription);
        });


       

          peerConnection.ontrack = (event) => {

             myVideo.current.srcObject = event.streams[0]
          };
          peerConnection.onicecandidate = event => {
            if (event.candidate) {
              socket.emit("candidate", id, event.candidate);
            }
          };
    
        });
        socket.on("candidate", (id, candidate) => {
          peerConnection
            .addIceCandidate(new RTCIceCandidate(candidate))
            .catch(e => console.error(e));
        });
        
        socket.on("connect", () => {
          socket.emit("watcher");
        });
        socket.on("broadcaster", () => {
          socket.emit("watcher");
        });
      }, [])
    
      return (
        <>
        </>
      )
    }
    ```