MediaRecorder not firing event

I’ve been trying to get the data from the media stream of a microphone when a user speaks into it.
My goal is to continually send that data over to a web server as until the user closes the mic by a button.
I’ve tried a lot like this from mdn unfortunately its in javascript and I try to rewrite it in typescript which I think is where my problem arises. At the moment this is what I have

  mediaRecorder?: MediaRecorder
  chunks: any = []
  dest?: MediaStreamAudioDestinationNode
  constraints = { audio:true, video: false }

  async record_audio() {
    if (navigator.mediaDevices){
      var $this = this;
      navigator.mediaDevices.getUserMedia(this.constraints).then((stream)=>{
        this.mediaRecorder = new MediaRecorder(stream)
        this.mediaRecorder.start();
        //this.mediaRecorder.ondataavailable = this.pushChunks;

        this.mediaRecorder.ondataavailable = function (e) {
          console.log("pushing chunk")
          $this.chunks.push(e.data);
        };
        console.log('starting recorder...')
      })
     
    } else { alert('getUserMedia not supported.'); }
  }

The method is called but the mediaRecorder.ondataavailable is never called. I don’t know if the method gets destroyed after it exits or something.

How do I continually get the data in this stream so I can upload it to a web server?