State Not Updating in useEffect When Clearing Filters

I have a global filter clearing function in a React app that should reset the filter dropdowns, input fields, and UI markers when a “Clear Filters” button is clicked.

The problem is that my clearFiltersTrigger remains undefined in the useEffect inside filter-utils.tsx, even though it is toggled in Container.tsx.

Even though console logs show that clearFiltersTrigger updates, the UI state (textboxes and filter markers) is not resetting as expected.

What am I doing wrong?

const Container: React.FunctionComponent = () => {
   const handleClearFilters = () => {
        console.log("Global Clear Filters Triggered!");
        setFilters({});
        setSelectedKeys([])
        setSelectedValues([]); 
    
        setClearFiltersTrigger((prev) => {
            console.log("Toggling clearFiltersTrigger to:", !prev); true
            return !prev; 
        });
    
        refetch(0, JOBS_TABLE_PAGE_LENGTH, false, undefined, undefined, {});
    };

   return (
        <ThatView
         clearFiltersTrigger={clearFiltersTrigger ?? false}
        />

In ThatView.tsx, we pass the state to ThatTable:

<ScansTable
   slot="Table"
   clearFiltersTrigger={clearFiltersTrigger ?? false} />

In ThatTable we pass the state to MyTable with columns:

<MyTable
   columns={MyTableColumns(refetch, jobs.length, clearFiltersTrigger)}

In MyTableColumns, we pass parameters to the function from filter-utils.tsx, which use useEffect to handle state updates.

{
key: 'name',
filterDropdown: getTextFilterDropdown("Search Scan Name", "Scan Name", "scan_name", refetch, jobsCount, clearFiltersTrigger)
}

getTextFilterDropdown:

export const getTextFilterDropdown = (
...
clearFiltersTrigger: boolean
...
   /** Reset input when global clear is triggered */
       React.useEffect(() => {
        console.log("useEffect triggered by clearFiltersTrigger:", clearFiltersTrigger); -- undefined
    
        if (clearFiltersTrigger) {
            setInputValue("");
            setSelectedKeys([]);
        }
    }, [clearFiltersTrigger]);

Why is useEffect inside filter-utils.tsx not triggering properly when clearFiltersTrigger updates?

How can I ensure the input box text and filter icon reset properly when clicking “Clear Filters”?

Is there a better way to handle global state updates across multiple components in this case?