Reactjs 简单对等：其他视频赢得'；在接受呼叫后不进行渲染

我正在尝试创建一个视频通话应用程序使用简单的对等。因此，问题是主机视频已渲染，但在接收器接受呼叫之后。他们的视频不会被渲染出来。 这是我的密码：

      useEffect(() => {
    
        socket = io(ENDPOINT);
    
        socket.on('chatMsg',(chat)=>{
            setNewMessage(chat);
        })
    
        socket.on('start',e=>{
          setIsCalling(true);
        })   
      }, []);
    
     useEffect(()=>{  
        if(!isCalling)
        {
          return null;
        }
    
        initializeVideo();
        socket.on('me',(data)=>{
          console.log(data.id);
          console.log(data.users);
          console.log(data.users.length)
         
       })
      socket.on('calluser',async ({ from, name: callerName, signal })=> {
        setCall({ isReceivingCall: true, from, name: callerName, signal });
        
      });
    
        socket.on('dc',e=>{
          leaveCall();
        })
    
      },[isCalling])
    
    
    
      const startCall  =()=>{
        socket.emit('calling');
      }
    
    
      const answerCall = async() => {
        setCallAccepted(true);
        const peer = new Peer({ initiator: false, trickle: false, stream });
        peer.on('signal', (data) => {;
          socket.emit('answercall', { signal: data, to: call.from });
        });
    
        peer.on('stream', (currentStream) => {
          console.log(currentStream);
          userVideo.current.srcObject = currentStream;
        });
    
        peer.signal(call.signal);
        connectionRef.current = peer;
      };
    
      const initializeVideo= async()=>{
        await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((currentStream) => {
        setStream(currentStream);
        myVideo.current.srcObject = currentStream;
        }); 
      }
      const callUser = async() => {
        const peer = new Peer({ initiator: true, trickle: false, stream });
        peer.on('signal', (data) => {
        socket.emit('calluser', {  signalData: data,  name });
        });
        peer.on('stream', (currentStream) => {
          userVideo.current.srcObject = currentStream;
        });
    
        socket.on('callaccepted', (signal) => {
          setCallAccepted(true);
          peer.signal(signal);
        });
    
        connectionRef.current = peer;
      };

  const leaveCall = () => {
    setCallEnded(true);
    connectionRef.current.destroy();
    window.location.reload();
  };

我意识到，如果在第一次使用效果中运行

initializeVideo（）

函数，就不会有问题。但是，我的目标是仅在用户单击“调用”按钮时渲染这两个视频