Change globalFilterFn at runtime?

[CapitaineToinon]

I made a global filter input to my table with the option for the filter to be case sensitive or not:

Internally, this toggles a state from includeString to includeStringSensitive that is then passed to useReactTable.

	const [filterFn, setFilterFn] = useState<
		'includesString' | 'includesStringSensitive'
	>('includesString')

	const table = useNoMemo(() =>
		useReactTable({
			data,
			columns,
			getRowId,
			state: {
				columnVisibility,
				columnFilters,
				globalFilter,
				sorting,
				pagination,
				rowSelection,
			},
			globalFilterFn: filterFn,
			// getRowCanExpand: (row) => true,
			// getExpandedRowModel: getExpandedRowModel(),
			getCoreRowModel: getCoreRowModel(),
			getFilteredRowModel: getFilteredRowModel(),
			getFacetedRowModel: getFacetedRowModel(),
			getFacetedUniqueValues: getFacetedUniqueValues(),
			getFacetedMinMaxValues: getFacetedMinMaxValues(),
			getSortedRowModel: getSortedRowModel(),
			getPaginationRowModel: getPaginationRowModel(),
			onColumnVisibilityChange: setColumnVisibility,
			onColumnFiltersChange: (...params) => {
				setRowSelection({})
				setColumnFilters(...params)
			},
			onGlobalFilterChange: (value) => {
				setGlobalFilter(value)
				setRowSelection({})
			},
			onSortingChange: setSorting,
			onPaginationChange: setPagination,
			onRowSelectionChange: setRowSelection,
			// custom stuff added to the table type
			// see types.d.ts
			...extraData,
		}),
	)

However this doesn't seems to trigger any rerender. I had to make a wrap my data in a use memo and a dummy id number that I then increment for the change to be picked up.

	const [id, setId] = useState(0)
	const forcedData = useMemo(() => [...data], [data, id])

	function setFilterFn(fn: 'includesString' | 'includesStringSensitive') {
		_setFilterFn(fn)
		setId((i) => i + 1)
	}

Is this use case not intended by the library? Is there a better way to do this?

Thanks for help. 👋