Complex column sorting in tanstack table (Solid) issues

Question

In a Solid JS app, I am attempting to utilize the Sort feature of a Tanstack Table (V8). I'm also using Webpack5 and Module Federation, if that could potentially cause an issue.

I have a column that utilizes values from multiple data fields/columns to format progress on a task. It needs to be able to be sorted:

{ cell: ({row}) =>
        <span
            class={`${row.original.commit_dt === row.original.trend_dt ? 'text-blue-100' : row.original.commit_dt < row.original.trend_dt ? 'text-red-400' : 'text-green-500'} font-bold`}
            title={`${row.original.commit_dt === row.original.trend_dt ? 'On track...' :
                `${row.original.commit_dt < row.original.trend_dt ? 'Behind by ' + wkDayDiff(row.original.commit_dt, row.original.trend_dt, true) : 'Ahead by ' + wkDayDiff(row.original.trend_dt, row.original.commit_dt)} working day(s)...`}`}>
                {row.original.trend_dt}
                </span>
        , header: 'Trend Date', size: 100, enableSorting: true, sortType: trendSort }

As you can see, I have created a sort function that should handle this, but for whatever reason it is failing. I believe I'm using the correct format, as documented for Tanstack Table V8 for Solid JS:

const trendSort = (rowA, rowB, id) => {
        const a = new Date(rowA.values[id]), b = new Date(rowB.values[id]);
        return a > b ? 1 : b > a ? -1 : 0;
    };

My header definition in the table is a bit complex, too, as it utilizes Solid-Icons and also contains a column resizer:

<thead class='uppercase bg-gray-700 display'>
    <For each={table.getHeaderGroups()}>
        {(headerGroup) => (
            <tr>
                <For each={headerGroup.headers}>
                    {(header) =>
                        <th key={header.id} style={{ width: `${header.getSize()}px` }} class={`p-1 text-xs`}>
                            {header.isPlaceholder ? null :
                                <>
                                    <span class={`${header.column.getCanSort() && 'cursor-pointer'} inline-flex`} onClick={header.column.getToggleSortingHandler()}>
                                        {flexRender(header.column.columnDef.header, header.getContext())}
                                    </span>
                                    <button class='inline float-right hover:bg-darkprimary hover:border-primary border-2 border-gray-600 p-0 resizing' onMouseDown={header.getResizeHandler()} onDoubleClick={header.column.resetSize()}>&#177;</button>
                                    {{asc: <AiOutlineCaretUp size={15} class="float-right text-secondary" />, desc: <AiOutlineCaretDown size={15} class="float-right text-secondary" />}[header.column.getIsSorted()?? null]}
                                </>
                            }
                        </th>
                    }
                </For>
            </tr>
        )}
    </For>
</thead>

Let me know if you need more code, as I have a large quantity of it for this purpose.