Merging rows in antd table if it has the same value

So I have an antd table in ReactJS that gets its data from an API call. So in my "account name" column, I have multiple values that are the same and I want to merge them into one row. I've tried looking for questions here and found this codesandbox project that does exactly what I want but when I applied it to my code, it wouldn't work. It drops the cells in my account name column and replaces it with values from the next column (Basically, moving my rows to the left and leaving the last column blank.)

UPDATE: I've added another sandbox link to recreate my problem or where I am at.

const names = new Set();

  useEffect(() => {
    names.clear();
  });



  const columns = [
    {
      key: "1",
      title: "Account Name",
      dataIndex: "account-name",
      rowSpan: 1,
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {}
        };

        console.log(names.has(value), value);

        if (names.has(value)) {
          obj.props.rowSpan = 0;
        } else {
          const occurCount = dataSource.filter(data => data['account-name'] === value).length;
          console.log(occurCount);

          obj.props.rowSpan = occurCount;
          names.add(value);
        }

        return obj;
      },
      sorter: (record1,record2) => record1['account-name'].localeCompare(record2['account-name']),
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => {
        return (
          <Input
            autoFocus
            placeholder="Search Column..."
            value={selectedKeys[0]}
            onChange={(e) => {
              setSelectedKeys(e.target.value ? [e.target.value] : []);
            }}
            onPressEnter={() => {
              confirm();
            }}
            onBlur={() => {
              confirm();
            }}
          ></Input>
        );
      },
      filterIcon: () => {
        return <SearchOutlined />;
      },
      onFilter: (value, record) => {
        return record['account-name'].toLowerCase().includes(value.toLowerCase());
      }
    },
    {
      key:"2",
      title:'Group ID',
      dataIndex:'group-id',
      sorter: (record1,record2) => record1['group-id'].localeCompare(record2['group-id']),
      width: '18%',
      rowSpan: 1,
  },
  {
      key:"3",
      title:'Financial Account ID',
      dataIndex:'financial-account-id',
      sorter: (record1,record2) => record1['financial-account-id'].localeCompare(record2['financial-account-id']),
      width: '15%',
      rowSpan: 1,
  },
  {
      key:"4",
      title:'Industry',
      dataIndex:'industry',
      sorter: (record1,record2) => record1.industry.localeCompare(record2.industry),
      width: '15%',
      rowSpan: 1,
  },
  {
      key:"5",
      title:'Billing Address',
      dataIndex:'billing-address',
      rowSpan: 1,
  },
  ];
    return (
        <div>
        <Table
        bordered={true}
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={true}
        />
        </div>
    )
}

When I change the value of obj.props.rowSpan into 0 it drops the whole columns of values. but when I change it into 1, it looks normal but without merging the rows.

Any help would be greatly appreciated I've been trying to fix this for a week.