TanStack Table Update State

Question

I am using TanStack Table to display some data. I am trying to filter categories which are saved in an array. Seems that I can filter the data with a custom filter, but I cannot figure out how to update the state of the table rows to the filtered data.

Here is my attempt.

table.setState((state) => ({
        ...state,
        rows: filteredData,
      }))

here is the full code: https://github.com/owolfdev/shadcn-tester/blob/main/app/expenses/data-table.tsx

here is the code deployed: https://shadcn-tester.vercel.app/expenses

here is the custom filter:

function handleFilterInputChange(event: React.ChangeEvent<HTMLInputElement>) {
const inputValue = event.target.value
if (filteringTerm === "categories") {
  const filteredData = data.filter((item) => {
    const itemWithCategories = item as TData & { categories?: string[] }

    // Convert categories array to lowercase strings
    if (!itemWithCategories.categories) return false
    const lowercaseCategories = itemWithCategories.categories.map(
      (category) => category.toLowerCase()
    )

    // Check if any category matches the search input
    return lowercaseCategories.some((category) =>
      category.includes(inputValue.toLowerCase())
    )
  })

  console.log("filteredData", filteredData)
  table.getColumn(filteringTerm)?.setFilterValue(event.target.value)

  // Update the filtered data
  table.setState((state) => ({
    ...state,
    rows: filteredData,
  }))
} else {
  table.getColumn(filteringTerm)?.setFilterValue(event.target.value)
}
  }