I am trying to use sort on one of the columns in antd table, all the columns render a custom component. When I comment out the render method, the sorting works fine but when I uncomment the render method the sorting stops working.

One of the column definition is as shown below:

{
      title: "Prefix",
      className: `${baseClassName}__table-prefixes`,
      dataIndex: "prefix",
      width: 110,
      sorter: (a, b) => {
        return a.prefix.localeCompare(b.prefix)},
      sortOrder: sortedInfo.columnKey === 'prefix' ? sortedInfo.order :  null,
      render: (value: string, record: any, index: number) => (
        <CustomCellTextArea
          index={index}
          value={value}
          data={prefixData}
          param="prefix"
          isEditable={isEditable}
          convertToUpperCase={true}
          placeholder="e.g. RFI"
          characterLimit={7}
          handleInputChange={handleInputChange}
        />
      ),
    },

I am working on it right now and I was expecting the sorting on the column to be working fine even with render method. The custom component returns a ReactNode.