Looking to sort the column where cell renders select with ANTD

Question

I am using the antd table to render the data and render select as cell data like the one below in the image, but having problems with sorting the same column based on the selected option name. The dataIndex is Id, and I am using that dataIndex to render the select option inside the cell.

Below is the code, and this is the image where I am rendering the cell.

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>
          );
        };

Could anyone please tell me how to sort the column having a drop-down based on the selected value in select? Also, please let me know if you need more information.

Many thanks in advance!!!

Update: I have tried the approach of how to sort, but it does not work