Antd Table含Select组件列的选中值排序问题求助

我使用Antd Table渲染数据，将select作为单元格内容，当前以Id作为dataIndex渲染Select选项，但无法基于选中选项名称对该列进行排序。

代码示例 #

export const compareStrings = (a, b) =>
  a?.toString()?.localeCompare(b, undefined, { sensitivity: 'accent' });

const BTable = ({ tableId }) => {
  const COLUMNS = [
    {
      title: 'Utility Type',
      dataIndex: 'utilityTypeId',
      sorter: (a, b) => {
        const aname = a.utilityTypeId.props.options.find(
          (sm) => sm.utilityTypeId === a.utilityTypeId.props.name
        )?.name;
        const bname = b.utilityTypeId.props.options.find(
          (sm) => sm.utilityTypeId === a.utilityTypeId.props.name
        )?.name;
        return compareStrings(aname, bname);
      }
    },
    {
      title: 'Enduse Type',
      dataIndex: 'enduseTypeId'
    }
  ];
  
  return (
    <FieldArray name={tableId}>
      {({ fields }) => {
        const data = fields.map((name, index) => {
          return {
            rowKey: index,
            enduseTypeId: (
              <Field
                name={`${name}.enduseTypeId`}
                component={AntdSelectIdAdapter}
                options={enduseTypesData?.enduseTypes}
                render={(o) => o.name}
              />
            ),
            utilityTypeId: (
              <Field
                name={`${name}.utilityTypeId`}
                component={AntdSelectIdAdapter}
                options={utilityTypesData?.utilityTypes}
                render={(o) => o.name}
              />
            ),
          };
        });
        return (
          <Table
            dataSource={data}
            columns={COLUMNS}         
            rowKey="rowKey"                      
          />
        );
      }}
    </FieldArray>
  );
};

更新：我已尝试相关排序方法，但未生效。

恳请告知如何实现含下拉框的列按选中值排序，如需更多信息请告知。

内容的提问来源于stack exchange，提问作者kumar425