I have a parent and a child component. There are 3 props the parent provides out of which 1 is not updating correctly.

Following is the parent component. The prop in question is selectedFilters (which is an object where keys are mapped to sets) and the relevant update function is filterChanged (this is passed to the child)

import filters from "../../data/filters";    //JSON data

const Block = (props) => {
  const [selectedFilters, setSelectedFilters] = useState({versions: new Set(), languages: new Set()});
  console.log(selectedFilters);

  const filterChanged = useCallback((filter_key, filter_id) => {
    setSelectedFilters((sf) => {
      const newSFSet = sf[filter_key]; //new Set(sf[filter_key]);
      if (newSFSet.has(filter_id)) {
        newSFSet.delete(filter_id);
      } else {
        newSFSet.add(filter_id);
      }
      const newSF = { ...sf, [filter_key]: new Set(newSFSet) };
      return newSF;
    });
  }, []);

  return (
    <FilterGroup
      filters={filters}
      selectedFilters={selectedFilters}
      onFilterClick={filterChanged}
    ></FilterGroup>
  );
};

export default Block;

The following is the child component: (Please note that while the Filter component runs the filterChanged function, I think it is irrelevant to the error)

import Filter from "./Filter/Filter";

const FilterGroup = (props) => {
  const { filters, selectedFilters, onFilterClick } = props;
  console.log(selectedFilters);

  const filter_view = (
    <Container className={styles.container}>
      {Object.keys(filters).map((filter_key) => {
        const filter_obj = filters[filter_key];
        return (
          <Filter
            key={filter_obj.id}
            filter_key={filter_key}
            filter_obj={filter_obj}
            selectedFilterSet={selectedFilters[filter_key]}
            onFilterClick={onFilterClick}
          />
        );
      })}
    </Container>
  );

  return filter_view;
};

export default FilterGroup;

When running the application, I find that the selectedFilters updates correctly only once. After that, it only changes temporarily in the main Block.tsx, but eventually goes back to the first updated value. Also, FilterGroup.tsx only receives the first update. After that, it never receives any further updated values.

Here are the logs:

After some experimentation, it is clear that the problem originates from the filterChanged function. But I cannot seem to figure out why the second update is temporary AND does not get passed on to the child.

Any ideas? Thanks in advance. (If any other info is required, pls do mention it)