typescript multiple decimal point sort using rxjs replayobject

Below is my custom table component's sorting. It is working good for String and number data types except the multiple decimal point number. DTableSort.ts

@Component({
    selector: "myDefaultGSorter",
    template: `
        <a style="cursor: pointer" (click)="sort()" class="text-nowrap" 
        [ngClass]="isSortedByMeAsc ? 'sort_by_asc' : isSortedByMeDesc ? 'sort_by_desc' : 'no_sorting'">
        <ng-content></ng-content>
        </a>`
})

DTable.ts

import { Directive , EventEmitter , Input , Output , OnInit , OnChanges, DoCheck, IterableDiffers, IterableDiffer } from '@angular/core';
import { ReplaySubject } from "rxjs";
import * as _ from "lodash";

export interface SortEvent {
  sortBy: string|string[];
  sortOrder: string
}

@Directive({
  selector: '<table [mxData]',
  exportAs: `mxDataTable`
})

export class DTableG implements OnChanges , OnInit, DoCheck  {

  private diff: IterableDiffer<any>;
  public onPageChange = new EventEmitter<PageEvent>();

  @Output() public onSortChange = new ReplaySubject<SortEvent>(1);
  @Input("mfSortBy") public sortBy: string|string[] = "";
  @Input("mfSortOrder") public sortOrder = "asc";
  @Input("mxData") public mxData : any[] = [];

  ngOnChanges() {        
    data = _.orderBy(data, this.sortBy, [this.sortOrder]);
  }
  /** sort */

  public setSort(sortBy: string|string[], sortOrder: string): void {
    if (this.sortBy !== sortBy || this.sortOrder !== sortOrder) {
        this.sortBy = sortBy;
        this.sortOrder = _.includes(["asc","desc"], sortOrder) ? sortOrder : "asc";
        this.onSortChange.next({sortBy: sortBy, sortOrder: sortOrder});  
        this.onSortChange.next({sortBy: sortBy, sortOrder: sortOrder});
     }
  }
}

And using the custom table and calling sort event with myDefaultGSorter as below

<table class="dTable" [mxData]="mgmtList" style="width: 98%;margin: 0px auto;"
       #applListMgmtTable="mxDataTable" >
  <thead>

  <tr>
    <th style="width: 13%">
      <myDefaultGSorter by="requirementId">
        Requirement ID
      </myDefaultGSorter>
    </th>
    <th style="width: 32%">
      <myDefaultGSorter by="applicableRequirement">
        Applicable Requirement
      </myDefaultGSorter>
    </th>

    <th style="width: 15%">
      <myDefaultGSorter by="requirementSource">
        Source
      </myDefaultGSorter>
    </th>
    <th style="width: 8%">Action</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor = "let dataL of applListMgmtTable.data">
    <td>
      {{dataL.requirementId}}
    </td>
    <td>
      {{dataL.applicableRequirement}}
    </td>
    <td>
      {{dataL.requirementSource}}
    </td>
    <td>
    </td>
  </tr>
  </tbody>
</table>

Requirement ids are getting sorted as

4.1.13
4.1.19
4.1.25
4.1.7
4.1.8
4.3.2
4.3.3
4.4.2

What I am expecting is as

4.1.7
4.1.8
4.1.13
4.1.19
4.1.25
4.3.2
4.3.3
4.4.2