Dom to Image plugin not capturing proper dropdown value

Question

I'm using dom-to-image plugin in my angular app to capture the pic of a div. I'm able to capture the div in everyplace except when there is a dropdown in the div. I do not get the selected dropdown value captured when capturing the image. I have a dropdown with few options. Whenver i take the pic the first option gets captured in the pic.

html code

 <div class="row" *ngIf="showStatusViolations">
<div class="col-lg-12 mt-3 mb-3 download-wrap position-relative">
  <app-download [chart_name]="'trend on status violations'">
  </app-download>
  <div class="chart-div graph-div open-violations code-vio cc-area-chart" style="height: 430px">
    <div class="row">
      <div class="col-md-12">
        <h5 class="text-center graph-heading mb-0 pb-0 pt-3">Trend on status of (High/Medium) Violations</h5>

      </div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">
        <div class="form-group mt-1 mr-2">
          <select class="form-control" id="sel2" [(ngModel)]="selectedStatus" (change)="selectedStatusTrendViolation($event.target.value)">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
            <option value="quarterly">Quarterly</option>
          </select>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="multi-line-chart-width" style="width: 95%; margin: 0 auto">
        <div class="legend text-center d-flex justify-content-center mb-2" style="width: 
          100%" *ngIf="statusViolations !== null && statusViolations.length !== 0">
          <div class="legend-value">
            <div class="violet mr-1"></div>
            <span>New</span>
          </div>
          <div class="legend-value">
            <div class="blue mr-1"></div>
            <span> Triaged</span>
          </div>
          <div class="legend-value">
            <div class="green mr-1"></div>
            <span> Closed</span>
          </div>
        </div>

        <div style="width: 90%; margin: 0 auto" *ngIf="showOpen">
          <app-ngx-line-resp *ngIf="statusViolations" 
          [chartWidth]="opnViolationGraphDimension" [data]="statusViolations"></app-ngx- 
        line-resp>

        </div>
        <div class="no_datas" *ngIf="statusViolations.length === 0">
          <h5> No Data Available</h5>
        </div>
      </div>
    </div>

  </div>
</div>

app-download.ts

import { Component, OnInit, Input } from '@angular/core';
import { Utils } from 'src/app/common/pipes/utility';

@Component({
selector: 'app-download',
templateUrl: './download.component.html',
styleUrls: ['./download.component.css']
})

export class DownloadComponent implements OnInit {
@Input() chart_name: any
@Input() data:any
temp_arr:any =[]

constructor(private papa: Papa) {
 }

ngOnInit() {}

dom_to_img(event, chart_name) {
Utils.dom_to_img(event.target, chart_name);
}

}

utility.ts

public static dom_to_img(elm, file_name) {
let chart: any = elm.closest(".download-wrap").querySelector('.graph- 
 div');
domtoimage.toPng(chart, { quality: 1, bgcolor: "#fff" })
  .then(function (dataUrl) {
    var link = document.createElement('a');
    link.download = file_name + ".png";
    link.href = dataUrl;
    link.click();
  });
}

I have attached two images. The first one shows how the div is . It has monthly in the dropdown. The second image shows the image that gets captured using the plugin. It shows daily in the dropdown which is actually the first option in the dropdown.