آپدیت نشدن state بعد از تغییر

 const [ageFrom, setAgeFrom] = useState('');
  const [ageTo, setAgeTo] = useState('');
 const filters = [
    {
      title: 'سن از',
      value: `${ageFrom} سال`,
      state: ageFrom,
      func: setAgeFrom,
    },
    { title: 'سن تا', value: `${ageTo} سال`, state: ageTo, func: setAgeTo },
]
const handleFilter = async () => {
    const dataFilter = {
      ageFrom,
      ageTo,
         };

      console.log(ageFrom, ageTo);
     };
return(
 {filters.map((filter) => {
              return filter.state !== '' ? (
                <button className="flex whitespace-nowrap gap-4 bg-info items-center cursor-pointer border border-primary px-4 w-fit rounded-md" key={filter.title}>
                  <span>
                    {filter.title}: {filter.value}
                  </span>
                  <span
                    className="text-2xl"
                    onClick={() => {
                      filter.func('');
                      handleFilter();
                    }}
                  >
                    &times;
                  </span>
                </button>
              ) : null;
            })}
)

وقتی فانکشن handleFilter اجرا میشه هنوز مقدار قبل state رو نشون میده