CaptureStream is only giving 1st stream frame

Question

I am trying to get stream of my react component by first changing it to canvas element using html2canvas and then using CaptureStream to get streams of canvas but when I try to listen to ondataavailable event in mediaRecorder I am only getting first time chunk instead of all chunks. Here is the code snippet.

    var canvas = await html2canvas(document.getElementById('app'));
    var canvasStream = canvas.captureStream();
    recorder = new MediaRecorder(canvasStream, { mimeType:'video/webm' });
    recorder.ondataavailable = function (ev) {
    console.log(ev.data)
    }
    recorder.start(1)

If anyone has any idea about this, it would be really helpful.Thank you