Column Filter in react-bootstrap-table-next not working?

I have following widgets which represents categories form the data in the table: enter image description here

The flow is when a user clicks on one of the widgets the table should show data of that category only.

So far I have implemented following:

```
const columns = [
{
....
dataField: "Category",
formatter: formatCategory,
text: "Category",
sort: true,
filter: textFilter({
getFilter: (filter) => {
// nameFilter was assigned once the component has been mounted.
categoryFilter = filter;
}
})
....
}
```

Handle Clicking Event on Button and Passing the category:

```
const handleWidgetClick = (category) => {
categoryFilter = category;

// When I am doing something like this I am getting Uncaught Error
// categoryFilter is not a Function
categoryFilter(category)
};
```

I have followed example from [here](https://stackoverflow.com/questions/63176791/how-to-use-column-filter-in-react-bootstrap-table-next)

I am not sure what/where I am doing something wrong. Please guide me through it, Thanks