Datatable column time sorting not working properly

I have primeng datatable which have sorting for each column everything was sorting fine until i formated my time column to ‘shortime’ through DatePipe and now my column is sorting wrong like this instead of normal 1-2-3…:

1:00AM
1:00PM
10:00AM
10:00PM
11:00AM
11:00PM
...

how can i fix that ? do i need some kind of custom sort ?

this is html

 <tr class="cols">
          <th pSortableColumn="time">Time <p-sortIcon field="time"></p-sortIcon>
            <p-columnFilter *ngIf="filterSwitch" display="menu" type="text" field="time"></p-columnFilter></th>
          <th pSortableColumn="temperature">Temperature <p-sortIcon field="temperature"></p-sortIcon>
...
...code

here is ts where i formatted the time

const times = historicalWeatherData.hourly.time.map((time) =>
          this.datePipe.transform(time, 'shortTime')
        );