Updating child component from inside the function body of a parent component

Question

I have a parent component which contains some Filters as a child which looks like:

type TProps = {
  filters: Array<IFilter | IDateFilter>;
  updateFilter: (field: string, selectedElements: Array<string>) => void;
  resetFilter: (field: string) => void;
  resetFilters: () => void;
};

const Filters: React.FC<TProps> = (props: TProps) => (
  <div className={styles.wrapper}>
    <FilterBar {...props} />
  </div>
);

Filters child in the parent component:

<Filters
   filters={filters}
   updateFilter={updateFilter}
   resetFilters={resetFilters}
   resetFilter={resetFilter}
/>

filters state in the parent component: const [filters, setFilters] = useState<Array<IFilter | IDateFilter>>([]);

updateFilter method expects a couple of arguments and is written in the parent like below:

const updateFilter = (field: string, selectedElements: Array<string>) => {
    setFilters(filters => {
      const updatedFilters = filters.map(filter => {
        if (filter.field === field) {
          return { ...filter, selectedElements: [...selectedElements] };
        }
        return filter;
      });
      return updatedFilters;
    });
  };

resetFilter & resetFilters have a similar structure to this. once they are triggered, an effect takes place as in the parent filters change:

useEffect(() => {
    fetchStuff();
  }, [filters]);

Although they seem to be working, I have this on my console Warning: Cannot update a component from inside the function body of a different component. As advised here https://github.com/facebook/react/issues/18147, I have tried the approach with useEffect as well as useCallback but they didn't seem to work as updateFilter expects some arguments for it to be called with.