Web Audio API and WebRTC: Hearing myself beside the remote audio if I am using the AudiContext to play the remote/peer AudioStream

Question

I am trying to achieve a simple peer to peer connection using WebRTC with the possibility to add gain to the remote audio stream in order to make the other peer louder.

The P2P connection part is working fine as of now but the audio part is giving me a headache. I already worked around the bug in chrome that the AudioContext is not playing when the remote stream is not attached to a muted audio element. https://bugs.chromium.org/p/chromium/issues/detail?id=933677
https://bugs.chromium.org/p/chromium/issues/detail?id=952700

But now I encountered the problem that in my current solution where I attach the remote stream to the AudiContext I can hear myself(localStream) talking beside the audio from the remote peer. The strange thing is that I never applied the localStream to the AudioContext. Maybe I am missing something obvious here.

Below I will Attach my client Code.
I hope someone can help me with that.

Thank you in advance.

import './style.css'

import { io } from "socket.io-client";

const servers = {
  iceServers: [
    {
      urls: ['stun:stun1.l.google.com:19302', 'stun:stun2.l.google.com:19302'],
    },
  ],
  iceCandidatePoolSize: 10,
};

// Global State
const pc = new RTCPeerConnection(servers);
console.log("connection to Signal Server");
const socket = io("https://chat.psps-apps.de");
let localStream: MediaStream;
let remoteStream: MediaStream;

socket.on("connect", () => {
  console.log("Connected");
  alert("Connected to Server");
});

socket.on("error", err => {
  console.log("Error ", err);
  alert("Error "+ err);
});

// HTML elements
const webcamButton = document.getElementById('webcamButton') as HTMLButtonElement;
const callButton = document.getElementById('callButton') as HTMLButtonElement;
const remoteAudio = document.getElementById('remoteAudio ') as HTMLAudioElement;
const hangupButton = document.getElementById('hangupButton') as HTMLButtonElement;
const range = document.getElementById("lautReg") as HTMLInputElement;
const label = document.getElementById("lautLabel") as HTMLLabelElement;

let gainNode: GainNode;
let context: AudioContext; 

range.value = "1";
label.innerText = range.value;


range.onchange = (ev) => {
  const inp = ev.target as HTMLInputElement;
  label.innerText = inp.value;

  gainNode.gain.value = parseFloat(inp.value) * 2;
  console.log("Gain ", gainNode.gain.value);  
  console.log(context);  
}

socket.on("offer-fw", async offer => {
  console.log("ON offer-fw", offer);  
  await pc.setRemoteDescription(new RTCSessionDescription(offer));
  
  const answerDescription = await pc.createAnswer();
  await pc.setLocalDescription(answerDescription);
  
  const answer = {
    type: answerDescription.type,
    sdp: answerDescription.sdp,
  };

  console.log("EMIT answer", answer);
  socket.emit("answer", answer);
})

// Get candidates for caller
pc.onicecandidate = event => {
  console.log("EMIT new-ice-offer-candidate", event.candidate?.toJSON());    
  event.candidate && socket.emit("new-ice-offer-candidate", event.candidate.toJSON());
}

// Listen for remote answer
socket.on("answer-fw", answer => {
  console.log("ON answer-fw", answer);    
  const answerDescription = new RTCSessionDescription(answer);
  pc.setRemoteDescription(answerDescription);

  pc.onicecandidate = event => {
    console.log("EMIT new-ice-answer-candidate", event.candidate?.toJSON());       
    event.candidate && socket.emit("new-ice-answer-candidate", event.candidate.toJSON());
  } 
})

// When answered, add candidate to peer connection
socket.on("new-ice-answer-candidate-fw", (candidateData) => {
  console.log("ON new-ice-answer-candidate-fw", candidateData);    
  const candidate = new RTCIceCandidate(candidateData);
  pc.addIceCandidate(candidate);
});

//################################################################
//when client gets called
socket.on("new-ice-offer-candidate-fw", (candidate) => {
  console.log("ON new-ice-offer-candidate-fw");    
  console.log("Candidate", candidate);    
  pc.addIceCandidate(new RTCIceCandidate(candidate));
})

webcamButton.onclick = async () => {
  localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  
  //!!!!The remote stream must be added to the audo HTMLElement and must be muted.
  //ONLY IF this is the case then the AudioContext is able to play.
  remoteStream = new MediaStream();
  remoteAudio.srcObject = remoteStream;
  remoteAudio.muted = true;

  context = new AudioContext();
  
  gainNode = context.createGain();

  gainNode.gain.value = 1;

  // Push tracks from local stream to peer connection
  localStream.getTracks().forEach((track) => {
    pc.addTrack(track, localStream);
  });

  // Pull tracks from remote stream, add to video stream
  pc.ontrack = (event) => {
    event.streams[0].getTracks().forEach((track) => {
      remoteStream.addTrack(track);
    });

    const mediaStreamSource = context.createMediaStreamSource(remoteStream);

    //this will apply the gain to the stream
    mediaStreamSource.connect(gainNode);
    
    // this will play the audio with the gain applied
    gainNode.connect(context.destination);
  
    
    // event.streams[0].getTracks().forEach(track => {
    //   remoteStream.addTrack(track);
    //   console.log("Track", track);
    // })
  };

  // webcamVideo.srcObject = localStream;

  callButton.disabled = false;
  webcamButton.disabled = true;
};

callButton.onclick = async () => {
  // Create offer
  const offerDescription = await pc.createOffer();
  await pc.setLocalDescription(offerDescription);

  const offer = {
    sdp: offerDescription.sdp,
    type: offerDescription.type,
  };

  socket.emit("offer", offer);
  
  hangupButton.disabled = false;
} 

function addGain(stream: MediaStream): MediaStream {
  const mediaStreamSource = context.createMediaStreamSource(stream);
  const mediaStreamDestination = context.createMediaStreamDestination();

  mediaStreamSource.connect(gainNode);
  gainNode.connect(mediaStreamDestination);

  return mediaStreamDestination.stream;
}