How to Ensure State Consistency When Using React Context and Asynchronous setState?

I want to maintain the filter values, which are key value pairs in a global context to support app wide state.

const createFilterContext = (defaultFilters: FilterState = {}) => {
const FilterContext = React.createContext<FilterContextType | undefined>(undefined);

const FilterProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [filters, setFilters] = React.useState<FilterState>(defaultFilters);

const setFilter = (key: string, value: any) => {
  setFilters((prevFilters) => ({ ...prevFilters, [key]: value }));
};

const clearFilters = () => {
  setFilters(defaultFilters);
};

return (
  <FilterContext.Provider value={{ filters, setFilter, clearFilters }}>
    {children}
  </FilterContext.Provider>
);
};

There is a filter panel which shows are the filter controls

const FilterPanel = ({ filterControls, onApply }: FilterPanelProps) => { }

<FilterPanel filterControls={filterControls} onApply={fetchDataWithFilters} />

FilterControls are some kind of input elements like dropdown, slider, checkbox etc.

onApply is passed by the pages that use FilterPanel. It will run when Apply Filters button in Filter Panel is clicked and will fetch Data with the applied key value pairs as query params to backend.

Now the problem here is React setState is asynchronous. So if I change some filter input control, and immediately click Apply Filters, the context state will be yet to update with the new value from that input control and makes fetch call without the new value.

My real code is much bigger and complex. I have simplified it here.
Please help me with your suggestions. Is my design bad? How can I solve this prolem?