duplication of expandable functionality in multi Tables antd

Question

I am using one table from 'antd' component for multiple tables on the same page. However, the expandable functionality is duplicated for all tables (that is, when I expand row 1 in one table and move to another table, row 1 is also expanded there). How to make unique expandable for each table?

This is my Parent component:

export const OtherDataTable = () => {
  const [loadingData, setLoadingData] = useState(false);
  const [activeButton, setActiveButton] = useState(0);
  const [patentData, setPatentData] = useState();
  const [articleData, setArticleData] = useState();
  const [financingData, setFinancingData] = useState();

  const patentURL = 'https://jsonplaceholder.typicode.com/users';
  const articleURL = 'https://jsonplaceholder.typicode.com/users';
  const financingURL = 'https://jsonplaceholder.typicode.com/users';

  useEffect(() => {
    setLoadingData(true);
    axios.get(patentURL).then((response) => {
      setPatentData(response.data);
      setLoadingData(false);
    });
  }, []);

  let dataPatentTable = [];
  if (patentData) {
    for (let i = 0; i < patentData.length; ++i) {
      dataPatentTable.push({
        key: patentData[i].id,
        id: patentData[i].id,
        name: patentData[i].username,
        dateField: patentData[i].phone,
        dateIssued: patentData[i].website,
        type: patentData[i].username,
        childData: patentData[i].address,
      });
    }
  }

  let dataArticleTable = [];
  if (articleData) {
    for (let i = 0; i < articleData.length; ++i) {
      dataArticleTable.push({
        key: articleData[i].id,
        doi: articleData[i].phone,
        name: articleData[i].username,
        publicationDate: articleData[i].phone,
        author: articleData[i].website,
        childData: articleData[i].address,
      });
    }
  }

  let dataFinancingTable = [];
  if (financingData) {
    for (let i = 0; i < financingData.length; ++i) {
      dataFinancingTable.push({
        key: financingData[i].id,
        id: financingData[i].id,
        name: financingData[i].username,
        dateField: financingData[i].username,
        dateIssued: financingData[i].username,
        type: financingData[i].username,
        childData: financingData[i].address,
      });
    }
  }

  const handleButtonClick = (index) => {
    setActiveButton(index);
    if (index === 1) {
      setLoadingData(true);
      axios.get(articleURL).then((response) => {
        setArticleData(response.data);
        setLoadingData(false);
      });
    } else if (index === 2) {
      setLoadingData(true);
      axios.get(financingURL).then((response) => {
        setFinancingData(response.data);
        setLoadingData(false);
      });
    }
  };

  return (
    <span className='chart_publication_title'>
      <p className='chart_header'>Other data</p>
      <TableComp
        dataParentTable={
          activeButton === 0
            ? dataPatentTable
            : activeButton === 1
            ? dataArticleTable
            : activeButton === 2
            ? dataFinancingTable
            : null
        }
        activeButton={activeButton}
        setActiveButton={setActiveButton}
        loadingData={loadingData}
        buttonNames={['Patents', 'Articles', 'Financing']}
        tableColumns={
          activeButton === 0
            ? patentColumns
            : activeButton === 1
            ? articleColumns
            : activeButton === 2
            ? patentColumns
            : null
        }
        handleButtonClick={handleButtonClick}
        isSearchInTable
        isTarget
      />
    </span>
  );
};

This is my child component with Table

const TableComp = ({
  buttonNames,
  dataParentTable,
  loadingData,
  catValue,
  diseaseValue,
  activeButton,
  setActiveButton,
  handleButtonClick,
  tableColumns,
  isSearchInTable,
  isMySubs,
  isTrends,
  isTarget,
}) => {
  const [isActive, setIsActive] = useState(false);
  const [dataSource, setDataSource] = useState();

  const buttons =
    buttonNames && buttonNames.map((button, i) => ({ key: i + 1, name: button, active: isActive }));

  const handleOnClick = (i) => {
    setIsActive(i === activeButton);
    setActiveButton(i);
    handleButtonClick(i);
  };

  useEffect(() => {
    setDataSource(dataParentTable);
  }, [dataParentTable]);

  useEffect(() => {
    if (catValue || diseaseValue) {
      setDataSource(
        dataParentTable.filter(
          (data) =>
            data.therapyCat.includes(catValue === undefined ? '' : catValue) &&
            data.disease.includes(diseaseValue === undefined ? '' : diseaseValue),
        ),
      );
    }
  }, [catValue, diseaseValue]);

  const handleOnChange = async (e) => {
    let value = e.target.value;
    if (value.length > 2) {
      let search = await patentsSearch(dataSource, value);
      setDataSource(search);
    } else {
      setDataSource(dataParentTable);
    }
  };

  return (
    <span className='table_container'>
      {(buttonNames || isSearchInTable) && (
        <div className='table_navigation_container'>
          {buttonNames && (
            <HorizontalList buttons={buttons} activeButton={activeButton} onClick={handleOnClick} />
          )}
          {isSearchInTable && (
            <SearchInput
              placeholder='Table search'
              allowClear
              onChange={handleOnChange}
              style={{ maxWidth: 360 }}
            />
          )}
        </div>
      )}
      <span className='table'>
        <Table
          columns={tableColumns}
          loading={loadingData}
          expandable={
            isMySubs
              ? null
              : {
                  expandedRowRender: (record) =>
                    ExpandedRowRender(
                      record.childData,
                      isTrends && isTrends,
                      isTarget && isTarget,
                      activeButton,
                    ),
                  rowExpandable: (record) => record.name !== 'Not Expandable',
                  expandIcon: ({ expanded, onExpand, record }) =>
                    expanded ? (
                      <DownOutlined
                        style={{ color: '#BAB3BC' }}
                        onClick={(e) => onExpand(record, e)}
                      />
                    ) : (
                      <RightOutlined
                        style={{ color: '#BAB3BC' }}
                        onClick={(e) => onExpand(record, e)}
                      />
                    ),
                }
          }
          dataSource={dataSource}
        />
      </span>
    </span>
  );
};

export default TableComp;