react-native-webrtc shows remote stream Blank

Question

I'm stuck on this problem since last 3 days, I'm making simple videocalling app but remote stream shows blank. However, when i add objectFit={"cover"} to RNView it shows Black instead of Blank. Does anyone have any idea why could that be?

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { RTCPeerConnection, RTCView, mediaDevices } from 'react-native-webrtc';
import socket from './socket';

const STUN_SERVERS = [
  { urls: 'stun:stun.l.google.com:19302' },
  // Add more STUN servers if needed
];
const VideoCall = () => {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState(null);
  const [peerConnections, setPeerConnections] = useState([]);
  const socketInstance =  socket()

  useEffect(() => {
    // Initialize local stream
    mediaDevices.getUserMedia({ audio: true, video: true })
      .then(stream => setLocalStream(stream))
      .catch(error => console.error('Error getting user media:', error));

    return () => {
      socketInstance.disconnect(); // Clean up socketInstance connection on component unmount
    };
  }, []);
  
  useEffect(() => {
    if (localStream) {
      // Create a peer connection for each user
      const pc = new RTCPeerConnection({
        iceServers: STUN_SERVERS,
      });
      setPeerConnections(prevConnections => [...prevConnections, pc]);
  
      // Add local stream to peer connection
      localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
  
      // Handle ICE candidate events
      pc.onicecandidate = event => {
        if (event.candidate) {
          // Send ICE candidate to all connected clients
          socketInstance.emit('ice-candidate', { candidate: event.candidate });
        }
      };
  
      // Handle remote stream events
      pc.ontrack = event => {
        setRemoteStream(event.streams[0]);
      };
    }
  }, [localStream]);
  
  useEffect(()=>{
    if (localStream){
      socketInstance.on('offer', data => {
        handleOffer(data);
      });
    }
  }, [localStream])

  const handleOffer = data => {
    if (!localStream) {
      console.error('Local stream is not yet available');
      return;
    }
    console.log('offerHandle Called')
    const pc = new RTCPeerConnection({
      iceServers: STUN_SERVERS,
    });
    setPeerConnections(prevConnections => [...prevConnections, pc]);
  
    // Add local stream to peer connection
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
  
    pc.onicecandidate = event => {
      if (event.candidate) {
        socketInstance.emit('ice-candidate', { candidate: event.candidate });
      }
    };
  
    pc.ontrack = event => {
      console.log("Received tracks:", event.streams[0].getTracks()); // Log the tracks
      // Check the kind of the track
      if (event.track.kind === 'video') {
        // If it's a video track, update remoteStream
        setRemoteStream(event.streams[0]);
      }
      // You can also handle audio tracks if needed
    };
  
    pc.setRemoteDescription(data.offer)
      .then(() => pc.createAnswer())
      .then(answer => {
        socketInstance.emit('answer', {
          answer,
          senderSocketId: data.senderUserId
        });
        return pc.setLocalDescription(answer);
      });
  };
  
  
  useEffect(() => {
    console.log('remote stream inUseeffect: ', remoteStream);
  }, [remoteStream]);
       
  const handleCall = () => {
    // Send offer to all connected clients
    peerConnections.forEach(pc => {
      pc.createOffer()
        .then(offer => {
          // Send the offer to all clients
          socketInstance.emit('offer', {
            offer
          });
          pc.setLocalDescription(offer);
        });
    });
  };  
  
  return (
    <View>
      <Text>Video Call Screen</Text>
      {localStream && <RTCView streamURL={localStream.toURL()} zOrder={1} style={{ width: 200, height: 150 }} />}
      {remoteStream && <RTCView streamURL={remoteStream.toURL()} zOrder={2} style={{ width: 200, height: 150 }} />}
      <Button title="Call" onPress={handleCall} />
    </View>
  );
};

export default VideoCall;

Here are the logs, as you can see remote stream get's logged, but shows blank, could the problem be with stun servers or something else?:

 LOG  rn-webrtc:pc:DEBUG 0 ctor +0ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +4ms
 LOG  rn-webrtc:pc:DEBUG 0 addTrack +54ms
 LOG  rn-webrtc:pc:DEBUG 0 createOffer +12s
 LOG  rn-webrtc:pc:DEBUG 0 createOffer OK +117ms
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription +4ms
 LOG  offerHandle Called
 LOG  rn-webrtc:pc:DEBUG 1 ctor +159ms
 LOG  rn-webrtc:pc:DEBUG 1 addTrack +216ms
 LOG  rn-webrtc:pc:DEBUG 1 addTrack +61ms
 LOG  rn-webrtc:pc:DEBUG 1 setRemoteDescription +52ms
 LOG  rn-webrtc:pc:DEBUG 0 setLocalDescription OK +25ms
 LOG  rn-webrtc:pc:DEBUG 1 ontrack +204ms
 LOG  rn-webrtc:pc:DEBUG 1 ontrack +82ms
 LOG  Received tracks: [{"_constraints": {}, "_enabled": true, "_muted": false, "_peerConnectionId": 1, "_readyState": "live", "_settings": {}, "id": "73d50db6-9154-4fd4-b274-c6c94f3ed3da", "kind": "audio", "label": "", "remote": true}]
 LOG  Received tracks: [{"_constraints": {}, "_enabled": true, "_muted": false, "_peerConnectionId": 1, "_readyState": "live", "_settings": {}, "id": "73d50db6-9154-4fd4-b274-c6c94f3ed3da", "kind": "audio", "label": "", "remote": true}, {"_constraints": {}, "_enabled": true, "_muted": false, "_peerConnectionId": 1, "_readyState": "live", "_settings": {}, "id": "5e19c8a9-23be-48d9-b0c6-3502b8323554", "kind": "video", "label": "", "remote": true}]
 LOG  rn-webrtc:pc:DEBUG 1 setRemoteDescription OK +93ms
 LOG  rn-webrtc:pc:DEBUG 1 createAnswer +2ms
 LOG  remote stream inUseeffect:  {"_id": "cdf55a01-3732-474e-a936-02b619d44aed", "_reactTag": "aeefb386-5ce1-44af-8050-77b02b097615", "_tracks": [{"_constraints": [Object], "_enabled": true, "_muted": false, "_peerConnectionId": 1, "_readyState": "live", "_settings": [Object], "id": "73d50db6-9154-4fd4-b274-c6c94f3ed3da", "kind": "audio", "label": "", "remote": true}, {"_constraints": [Object], "_enabled": true, "_muted": false, "_peerConnectionId": 1, "_readyState": "live", "_settings": [Object], "id": "5e19c8a9-23be-48d9-b0c6-3502b8323554", "kind": "video", "label": "", "remote": true}]}