How do you add table footers with react-bootstrap-table?

Question

In the latest release of react-bootstrap-table (4.1.5), there is a React component called TableFooter which I presume allows you to add a footer to the bottom of a table.

There is an example of how to use it listed in the source (although not in the official site documentation), however it does not seem to work. Its supposed usage is reproduced below:

render() {
    const footerData = [
      [
        {
          label: 'Total',
          columnIndex: 0
        },
        {
          label: 'Total value',
          columnIndex: 2,
          align: 'right',
          formatter: (tableData) => {
            let label = 0;
            for (let i = 0, tableDataLen = tableData.length; i < tableDataLen; i++) {
              label += tableData[i].price;
            }
            return (
              <strong>{ label }</strong>
            );
          }
        }
      ]
    ];

    return (
      <div>
        <BootstrapTable
          data={ products }
          footerData={ footerData }
          footer
          pagination
          search>
          <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }

When running the above example it errors when trying to access a property called "filter" on the footer object passed in. This occurs on this line in TableFooter.js:

const footerObj = footerItem.filter((item) => {
    return item.columnIndex === colIndex;
});

I think the filter function referenced above is supposed to select one of the footer data objects passed in, but I'm not sure how to define it.

How are you supposed to add a footer to a table?