React issues with reading a value in a context - reactjs

Question

I have this context:
FilterProvider.tsx
import React, { createContext, useRef } from "react";
interface IFiltersContext {
filters: { [key: string]: any };
updateFilter: (name: string, value: any) => void;
addFilter: (name: string, value: any) => void;
clearFilter: (name: string) => void;
}
type FilterContextProps = {
initialFilters?: any;
onFilterChange: (values: any) => void;
};
export const FiltersContext = createContext<IFiltersContext>({
filters: {},
updateFilter: () => {},
addFilter: () => {},
clearFilter: () => {}
});
export const FiltersProvider: React.FC<FilterContextProps> = ({
children,
onFilterChange,
initialFilters = {}
}) => {
const filters = useRef(initialFilters);
const updateFilter = (name: string, value: any) => {
addFilter(name, value);
onFilterChange(filters.current);
};
const addFilter = (name: string, value: any) => {
filters.current = {
...filters.current,
[name]: value
};
};
const clearFilter = (name: string) => {
if (filters.current[name] !== null && filters.current[name] !== undefined) {
updateFilter(name, null);
}
};
return (
<FiltersContext.Provider
value={{ filters, updateFilter, addFilter, clearFilter }}
>
{children}
</FiltersContext.Provider>
);
};
And to be able to use this functions I use it as follows
<FiltersProvider onFilterChange={function (values: any): void {
console.log("Function not implemented.");
} }>
<PrettyTable
tableName="table_publications"
overlayFilter={
<>
<CountryFilter />
</>
}
{...tableData}
/>
</FiltersProvider>
Now inside PrettyTable I have the following : (NOTE1****)
const { showDialog } = useDialog();
const { filters, addFilter } = useContext(FiltersContext);
console.log(filters?.current) //always "somename", "test" , only the function call in Confirm will save things. THe one inside COuntryFIlter (See below) wont
function showFilterSelector() {
showDialog({
title: "Filter Columns",
message: <DialogContent />,
cancel: {
action: () => console.log("cancelled"),
message: "Reset Filters"
},
confirm: {
action: () => addFilter("somename", "test"), //I can see this calling addFilter, and after that "filters.current" has its value.
message: "Apply Filters"
},
align: "start",
width: "100%",
height: "100%",
wide: true
});
}
useEffect(() => {
debugger;
},[filters])
const DialogContent = () => {
return (
<Grid
columns={["flex", "flex", "flex"]}
justifyContent={"around"}
gap="small"
>
{props.overlayFilter} --> Prop found in the first code snippet, content of that component is in the last code snippet (below)
</Grid>
);
};
In the code above, im able to see the confirm action calling the function inside the provider, and it works just fine
But props.overlayFIlter contain the following:
Which is also using the same context inside
export const CountryFilter = ({...}) => {
const { filters, addFilter, updateFilter, clearFilter } = useContext(FiltersContext);
return (
<SelectComponent
onChange={i => {
addFilter("filter1","x") //This one is also being called supposedly in the context, but later I cant read it anywhere
}} /> )
But the above function despite calling the same context, the added data wont be able to be read in (NOTE1*** code snippet). I will only see the filter registered in the confirm action ("somename", "test")
What am I dont wrong? Am I using the contexts wrong?