Web Audio API add voice and local file in same stream

I am trying to add multiple track in my MediaStream object. I am trying to add a local media file and voice input together. My code is as below:

HTML:

<input id="sourcepath" type="file" accept="audio/*" />
<audio controls id="audio-player"></audio>
<button id="play" onclick="playsound()">start</button>

JS:

async function playsound(){
        
        var URL = window.URL.createObjectURL($("#sourcepath").prop('files')[0]);
        var BlobURL = await window.fetch(URL);
        var AudioPlayer = document.getElementById('audio-player');

        var audioContext = new AudioContext();
        var buffer = await BlobURL.arrayBuffer();
        var audioBuffer = await audioContext.decodeAudioData(buffer);
        var source = audioContext.createBufferSource();
        source.buffer = audioBuffer;
       

        var streamDestination = audioContext.createMediaStreamDestination();
        
        source.connect(streamDestination);
        source.loop = true;
        source.start();
        var stream = streamDestination.stream;
        

        for (const track of stream.getTracks()) {
            console.log(track); // Printing one track
        }
        
        var astream = await navigator.mediaDevices.getUserMedia({
        audio:true, video: false
        });
        for (const track of astream.getTracks()) {
          stream.addTrack(track); 
        }
            

        for (const track of stream.getTracks()) {
            console.log(track); // Printing two Tracks which is expected
        }

        AudioPlayer.srcObject = stream; // The Audio file is playing perfectly. But Voice input is not working
        
    }

This code is working for the audio file I am selecting from input type file. But the Voice input track is not working. Same code works if I use any one of the two tracks. Please help.