Ant Design Table expand Icon not behaving properly

Question

I am using Ant Design (v5) Table component in my React project. Inside the Table component, am using the expandIcon property belonging to the expandable prop, in order to expand only those rows which satisfy a certain condition. When I use the default expand icon (+), the icon is displayed only for the rows where I want to display it, i.e., it is displayed correctly.

However, when I use custom icons from @ant-design/icons for the expand icon, the icon is displayed for all rows, regardless of whether the row satisfies the condition or not.

Can anyone please help me resolve this issue?

To replicate the issue, go to https://codesandbox.io/s/fervent-bird-nuzpr and replace the index.js code with the following -

import React from "react";
import ReactDOM from "react-dom";
import { PlusCircleTwoTone, MinusCircleTwoTone } from "@ant-design/icons";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const columns = [
  { title: "Name", dataIndex: "name", key: "name" },
  { title: "Age", dataIndex: "age", key: "age" },
  { title: "Address", dataIndex: "address", key: "address" },
  {
    title: "Action",
    dataIndex: "",
    key: "x",
    render: () => <a href='https://www.google.com'>Delete</a>
  }
];

const data = [
  {
    key: 1,
    user_role: 3,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    description:
      "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
  },
  {
    key: 2,
    user_role: 3,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    description:
      "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
  },
  {
    key: 3,
    user_role: 1,
    name: "Not Expandable",
    age: 29,
    address: "Jiangsu No. 1 Lake Park",
    description: "This not expandable"
  },
  {
    key: 4,
    user_role: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    description:
      "My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park."
  }
];

ReactDOM.render(
  <Table
    columns={columns}
    dataSource={data}
    expandable={{
      expandedRowRender: record => (
        <p style={{ margin: 0 }}>{record.description}</p>
      ),
      rowExpandable: (record) => {
        // console.log('rowExpandable: ', record)
        return record.user_role > 1 ? true : false
      },
      expandIcon: ({ expanded, onExpand, record }) =>
        expanded ? (
          <MinusCircleTwoTone onClick={e => onExpand(record, e)} />
        ) : (
          <PlusCircleTwoTone onClick={e => onExpand(record, e)} />
        )
    }}
  />,
  document.getElementById("container")
);

Answer 1

I got the solution, I just need to change the expandIcon function like below, and it will work properly.

expandIcon: ({ expanded, onExpand, record }) =>
      record.user_role > 1 ? (
        expanded ? (
          <MinusCircleTwoTone onClick={(e) => onExpand(record, e)} />
        ) : (
          <PlusCircleTwoTone onClick={(e) => onExpand(record, e)} />
        )
      ) : null,