react native webrtc - remote stream updating but not rendered in component

Question

I am using https://github.com/react-native-webrtc/react-native-webrtc and I tried following code

export default function PeerProvider({children}) {
  const [socket, setSocket] = useState();
  const [peer, setPeer] = useState();
  const [stream, setStream] = useState();
  const [remoteStream, setRemoteStream] = useState(null);

  useEffect(() => {
  }, [remoteStream]);
  useEffect(()=>{
    const st = io('http://192.168.0.104:4000');
    st.on("connect", () => {
      console.log(st.id);
      setSocket(st)
    })
    const pc = new RTCPeerConnection()
    pc.addEventListener('track', (e)=>{
      const streams = e.streams
      alert('got stream')
      setRemoteStream(streams[0])
    })
    pc.addEventListener('negotiationneeded', event => {
      alert('negotiationneeded');
      console.log('negotiationneeded============')
    })
    console.log(pc)
    setPeer(pc)

  },[])
  const createOffer = async () => {
    const offer = await peer.createOffer()
    await peer.setLocalDescription(offer)
    return offer
  }

  const createAnswer = async (offer) => {
    await peer.setRemoteDescription(offer)
    const answer = await peer.createAnswer()
    await peer.setLocalDescription(answer)
    return answer
  }

  const setRemoteAns = async (ans)=>{
    await peer.setRemoteDescription(ans)
  }
  const sendStream = async (stream) => {
    const tracks = stream.getTracks()
    for (const track of tracks)
      peer.addTrack(track, stream)
  }

  return (
      <>
        {peer && socket &&
    <PeerContext.Provider value={{peer, socket, createOffer, createAnswer,setRemoteAns, remoteStream, sendStream}}>
      {children}
      {remoteStream && <>
        <RTCView
            streamURL={remoteStream.toURL()}
            style={{flex:1}} />
      </>
      }
    </PeerContext.Provider>
        }
      </>
  )
}
export const usePeer = () => useContext(PeerContext)

export default function Room({navigation}) {
    const {peer, socket, createOffer,createAnswer,setRemoteAns, remoteStream,sendStream} = useContext(PeerContext)
    const [stream, setStream] = useState();
    const [disabled, setDisabled] = useState(false);

    useEffect(() => {
        start()
    }, []);
    const start = async () => {
        console.log('start');
        if (!stream) {
            let s;
            try {
                s = await mediaDevices.getUserMedia({audio: true, video: true});
                setStream(s);
            } catch (e) {
                console.error(e);
            }
        }
    };

    const newUserJoined = async ({user,room})=>{
        const offer = await createOffer()
        socket.emit('call_user', {offer, user})
    }
    const incoming_call = async ({from,offer})=>{
        const ans = await createAnswer(offer)
        socket.emit('call_accepted', {from, ans})
    }
    const call_accepted = async ({ans})=>{
        await setRemoteAns(ans)
    }
    useEffect(()=>{
        socket.on('incoming_call', incoming_call)
        socket.on('new_joined_room', newUserJoined)
        socket.on('call_accepted', call_accepted)
    },[])

    useEffect(() => {
        socket.emit('join_room', socket.id)
    }, []);
    function send() {
        sendStream(stream)
        setDisabled(true)
    }

    return <>
        <Text>Room</Text>
        <Button title={'send stream'} disabled={disabled} onPress={send}/>
        {remoteStream && <>
            <RTCView
                streamURL={remoteStream.toURL()}
                style={{flex:1}} />
        </>
        }
    </>
}

I am using one emulator and my real mobile device for testing. I am getting alert got stream but remotestream is not showing And when I refresh emulator then it starts showing. But why I need to refresh emulator ? Also I see in most examples ice candidate event is used. I want to know what is the use of ice candidate and how can I use it in my code.

Also, negotiationneeded is not firing so why negotiation is not needed in this case ?