Cannot call `setState` with function bound to `state` because function [1] is incompatible with array type [2]

In my react app (using Flow for type checking), I have the following setup:

type Filter = {
    title: string,
    value: string
};

export type State ={
    filter: Array<Filter>
}

export type Actions<T> = {
    setFilters: (filter: Array<Filter>) => T
}

In my component, I need to merge the newly created/modified data with the previous array object in the state.

I am initializing the state in useEffect based upon some conditions. The first setState() (inside first if() check) works fine.

But during the second setState(), I get the following error:

Cannot call `setFilters` with function bound to `filter` because  function [1] is incompatible with  array type [2]

Where,

1 denotes

setFilters((prevState) => {
   return [...prevState, ...newData];
});

and [2] denotes setFilters: (filter: Array<Filter>) => T

//
.....

useEffect(() => {
    if (current) {
      setFilters([
        {
          title: 'abc',
          value: '1'
        },
      ]);
    }

    if (current && old) {
      const newData = old.map((datum) => ({
        title: datum.title,
        value: datum.value,
      }));

      setFilters((prevState) => {
        return [...prevState, ...newData];
      });
    }
  }, [current, old]);

.....
//

Sample data:

const old = [
    {
        title: 'oldabc',
        value: '1',
        status: 'expired',
        count: 2
    },
    {
        title: 'oldxyz',
        value: '2',
        status: 'pending',
        count: 4
    },
    ....
];

the final result required:

[
    {
        title: 'abc',
        value: '1'
    },
    {
        title: 'oldabc',
        value: '2',
    },
    {
        title: 'oldxyz',
        value: '3'
    },
    ....
]

I am pretty sure there is some silly fix that I am missing, but still unable to figure out how to resolve it. Any help to resolve the same will be appreciated!