I'm using ngx-boostrap datepicker and i have two datepickers as below

<div class="form-group col-sm-2">
  <input type="text" id="dvcStart" class="form-control  form-control-sm" #dp="bsDatepicker" bsDatepicker
    [(bsValue)]="dvcStartDateValueStr" [(ngModel)]="dvcStartDateValue" 
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' ,containerClass:'theme-dark-blue' }">
</div>
<div class="form-group col-sm-2">
  <input type="text" id="dvcEnd" class="form-control  form-control-sm" #dp="bsDatepicker" bsDatepicker
    [(bsValue)]="dvcEndDateValueStr" [(ngModel)]="dvcEndDateValue" 
    [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD',containerClass:'theme-dark-blue' }">
</div>

First datepicker working perfectly as expected but second one changing value itself for example page initial normally with expected values but when i click one of button or trigger one event without connection with datepicker, second datepicker value disappear and removing value itself. This is how i fill my datepickers in typescript side

  public dvcEndDateValue: Date;
  public dvcStartDateValue: Date;
  ngOnInit() {
     this.dvcStartDateValue = getFirstDayOfMonth();
     this.dvcEndDateValue = new Date();
  }

What is causing this problem? Any ideas?