Answer created only on Hot Reload

Hey, I am working on a live chat app between two people however the video streaming only works when I do a hot reload on my react code file.
The issue is the offer is sent and recieved however the answer is not created and sent back
Here is my code (the same code is used for both clients the only difference is the "caller" variable is set to true for one client)

const localVideoRef = useRef(null);
const remoteVideoRef = useRef(null);

const [localStream, setLocalStream] = useState();
const [isMuted, setIsMuted] = useState(false);
const [isVideoOff, setIsVideoOff] = useState(false);

const peer = new SimplePeer({
initiator : caller,
trickle : false,
})

const getLocalStream = async () => {

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
peer.addStream(stream)
setLocalStream(stream);
localVideoRef.current.srcObject = stream;

};

useEffect(() => {

SIGNALRCONNECTION.getConnection().on(`ReceiveSignal/${callId}`, data => {
console.log("Recieved: ", JSON.parse(data));
peer.signal(JSON.parse(data))
})

peer.on('signal', data => {
console.log("Send:", data)
SIGNALRCONNECTION.getConnection().invoke("SendSignal", callId, JSON.stringify(data));
})

peer.on('stream', stream => {
const remoteStream = stream;
remoteVideoRef.current.srcObject = remoteStream;
})

getLocalStream()

}, []);