Async call with react-bootstrap-table onExpand is not working

Question

I am using react-bootstrap-table2 Row Expand Hooks. I'm trying to call function when click on the row and get data from database. However it doesn't work.

I am getting all the data in console but row is not expanding.

Here is my code:

  expandRow = {
    parentClassName: 'completed-row',
    renderer: row => (
      <Table className='table text-center mt-4 ms-0 me-0 mb-4'>
        <thead>
          <tr>
            <th>No</th>
            <th>MODEL NAME</th>
          </tr>
        </thead>
        <tbody>
          {this.props.products.filter((product) => product.category._id === row._id).sort((a, b) => a.sortNo - b.sortNo).map((product, index) => {
            return (
            <tr key={index} className={product.hidden ? 'on-hold-row' : ''}>
              <td><h5 className='font-size-16 mb-1'>{product.sortNo}</h5></td>
              <td>
                <div className='comp-text text-center'>
                  <h5 className='font-size-16 mb-1'>{product.title}</h5>
                </div>
              </td>
            </tr>
            )
          })}
        </tbody>
      </Table>
    ),
    showExpandColumn: true,
    onlyOneExpanding: true,
    onExpand: (row, isExpand, rowIndex, e) => {
      const { onGetCatProductsData } = this.props;
      onGetCatProductsData(row);
      console.log(row);
      console.log(isExpand);
      console.log(rowIndex);
      console.log(e);

    },
  };

Im calling onGetCatProductsData and pass row. Im getting response but row is not expanding. It just loads and then nothing.

How it is supposed to look like:

What can be the problem?