Why I'm getting the Error when the stream is exist?

`
import { useEffect, useRef, useState } from "react";
import { FaPhone } from "react-icons/fa6";
import { MdOutlineAssignment } from "react-icons/md";
import Peer from "simple-peer";
import io from "socket.io-client";

const socket = io.connect('http://localhost:5000')

function App() {
const [me, setMe] = useState("")
const [stream, setStream] = useState()
const [receivingCall, setReceivingCall] = useState(false)
const [caller, setCaller] = useState("")
const [callerSignal, setCallerSignal] = useState()
const [callAccepted, setCallAccepted] = useState(false)
const [idToCall, setIdToCall] = useState("")
const [callEnded, setCallEnded] = useState(false)
const [name, setName] = useState("")
const myVideo = useRef()
const userVideo = useRef()
const connectionRef = useRef()

useEffect(() => {
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
setStream(stream)
myVideo.current.srcObject = stream
})

socket.emit("me")

socket.on("me", (id) => {
setMe(id)
})

socket.on("callUser", (data) => {
setReceivingCall(true)
setCaller(data.from)
setName(data.name)
setCallerSignal(data.signal)
})
}, [])

const callUser = (id, stream) => {
console.log({
initiator: true,
trickle: false, // It's good practice to add this
stream: stream
})
const peer = new Peer({
initiator: true,
trickle: false, // It's good practice to add this
stream: stream
});

peer.on("signal", (data) => {
socket.emit("callUser", {
userToCall: id,
signalData: data,
from: me,
name: name
});
});

peer.on("stream", (stream) => {
userVideo.current.srcObject = stream;
});

socket.on("callAccepted", (signal) => {
setCallAccepted(true);
peer.signal(signal);
});

connectionRef.current = peer;
};

const answerCall = () => {
setCallAccepted(true)
const peer = new Peer({
initiator: false,
trickle: false,
stream: stream
})
peer.on("signal", (data) => {
socket.emit("answerCall", { signal: data, to: caller })
})
peer.on("stream", (stream) => {
userVideo.current.srcObject = stream
})

peer.signal(callerSignal)
connectionRef.current = peer
}

const leaveCall = () => {
setCallEnded(true)
connectionRef.current.destroy()
}

const handleCopy = (text) => {
console.log(text)
navigator.clipboard.writeText(text);
alert("Copied!");
};

return (
<>

Zoomish

export default App
`