How to sort time column in jqgrid?

We are binding a table using jqgrid. We have the first column start as a time column with a 12-hour format. We are facing an issue with sorting this data. The data is sorted correctly but it is not taking am/pm into consideration. Below is our code for binding the jqgrid:

var newFieldsArray =
        [
            { name: "ID", title: "ID", type: "number", width: "50px", visible: false },
            {
                name: "TimeStart", title: "Start", type: "customTime", width: "100px", validate: "required",
                sorttype: "date",
                formatter : {     
                    date : {       
                    AmPm : ["am","pm","AM","PM"],       
                    }     
                },
                // datefmt: "m/d/Y h:i A",
                //sorttype: 'datetime', formatter: 'date', formatoptions: {newformat: 'd/m/y', srcformat: 'Y-m-d H:i:s'},
                insertTemplate: function () {
                    var $result = jsGrid.fields.customTime.prototype.insertTemplate.call(this); // original input

                    $result.val(varendTime);

                    return $result;
                },
                itemTemplate: function (value, item) {
                    return "<b style='display:none'>" + Date.parse(item.StartDate) + "</b><span>" + (item.TimeStart) + "</span>";
                }
            },
            {
                name: "TimeEnd", title: "End", type: "customTime", width: "100px", validate: "required",sorttype: "date", datefmt: "h:i"
            },
            { name: "TimeTotal", title: "Time", type: "text", width: "50px", readOnly: true },
            {
                name: "CoilPO", title: "Coil PO", type: "text", width: "50px", validate: "required",
                insertTemplate: function () {
                    var $result = jsGrid.fields.text.prototype.insertTemplate.call(this); // original input

                    $result.val(varlot);

                    return $result;
                }
            },
            { name: "Joints", title: "Joints", type: "integer", width: "60px" },
            { name: "CommercialGrade", title: "Commercial Grade", type: "integer", width: "80px" },
            { name: "QAHold", title: "QA Hold", type: "integer", width: "60px" },
            { name: "Rejected", title: "Reject", type: "integer", width: "60px" },
            { name: "ActionTaken", title: "Reason of Delay / Action Taken", type: "text", width: "120px" },
            {
                name: "ClassId", title: "Class",
                type: "select", items: classDataArr,//classData.filter(function(n){return classdt.indexOf(n.Id) != -1 }),//classData,
                valueField: "Id", textField: "Title",
                insertTemplate: function () {
                    debugger;
                    var taxCategoryField = this._grid.fields[12];
                    var $insertControl = jsGrid.fields.select.prototype.insertTemplate.call(this);

                    var classId = 0;
                    var taxCategory = $.grep(voiceData, function (team) {
                        return (team.ClassId) === classId && (team.StationId) == parseInt($('#ddlEquipmentName').val());
                    });
                    taxCategoryField.items = taxCategory;
                    $(".tax-insert").empty().append(taxCategoryField.insertTemplate());

                    $insertControl.on("change", function () {
                        debugger;
                        var classId = parseInt($(this).val());
                        var taxCategory = $.grep(voiceData, function (team) {
                            return (team.ClassId) === classId && (team.StationId) == parseInt($('#ddlEquipmentName').val());
                        });
                        taxCategoryField.items = taxCategory;
                        $(".tax-insert").empty().append(taxCategoryField.insertTemplate());
                    });

                    return $insertControl;
                },
                editTemplate: function (value) {
                    var taxCategoryField = this._grid.fields[12];
                    var $editControl = jsGrid.fields.select.prototype.editTemplate.call(this, value);

                    var changeCountry = function () {
                        var classId = parseInt($editControl.val());
                        var taxCategory = $.grep(voiceData, function (team) {
                            return (team.ClassId) === classId && (team.StationId) == parseInt($('#ddlEquipmentName').val());
                        });
                        taxCategoryField.items = taxCategory;
                        $(".tax-edit").empty().append(taxCategoryField.editTemplate());
                    };
                    debugger;
                    $editControl.on("change", changeCountry);
                    changeCountry();
                    return $editControl;
                }
            },
            {
                name: "VoiceId", title: "Voice", type: "select", items: voiceData,
                valueField: "Id", textField: "Title", width: "120px", validate: "required",
                insertcss: "tax-insert",
                editcss: "tax-edit",
                itemTemplate: function (teamId) {
                    var t = $.grep(voiceData, function (team) { return team.Id === teamId; })[0].Title;
                    return t;
                },
            },
            { name: "Remarks", title: "Remarks", type: "text", width: "110px" },
            { name: "control", type: "control" }
        ];

    hoursGrid.jsGrid("option", "fields", newFieldsArray);

Below is two screenshots of data that appear when we sort:

Can someone tell me what we are doing wrong?