react，将子组件里筛选出来的数据，传参到父组件里的某个函数里，第一次获取不了筛选的数据，第二次才能获取到筛选的数据

在使用的react版本如下：

已写的部分代码：
父组件HouseList：

function HouseList() {
// ...
useEffect(() => {
    async function fetchData() {
      const { label, value } = await getCurrentCity()
      setLabel(label)
      setValue(value)
      searchHouseList(value)
    }
    fetchData()
  },[])
// ...
  // 用来获取房屋列表数据
  const searchHouseList = (value) => {
    API.get('/houses', {
      params: {
        cityId: value,
        ...filters,
        start: 1,
        end: 20
      }
    }).then(res=>{
   // ...
    })
  }

 // 接收 子组件Filter 中的筛选条件数据
  const onFilter = filters => {
    // 返回页面顶部
    window.scrollTo(0, 0)
    setFilters(filters)
    // 调用获取房屋数据的方法
    searchHouseList(value)
  }
}

子组件Filter：

function Filter(props) {
// ...
// 确定按钮（隐藏对话框）
  const onSave = (type, value) => {
// ...
// 调用父组件HouseList中的方法，来将筛选数据传递给父组件HouseList
    props.onFilter(filters)
// ...
}

希望实现的效果是，首次进入本页面时能获取到所在城市的数据，当选择好筛选条件并点击某按钮后，能显示出该城市里筛选后的数据

目前效果是，首次进入本页面时能获取到所在城市的数据，但选择好筛选条件并点击某按钮后，依然显示筛选前的所在城市数据，当再次点击该按钮后，才能显示出该城市里筛选后的数据（即第一次点击只显示出筛选前的数据，第二次点击才显示出筛选后的数据）

一开始以为是由于父组件里的useEffect和onFilter里的这两个地方都使用了searchHouseList(value)导致第二次才能获取到筛选数据，于是试过将父组件里的着两个地方的searchHouseList(value)先后单独注释掉：

useEffect(() => {
    async function fetchData() {
      const { label, value } = await getCurrentCity()
      setLabel(label)
      setValue(value)
      // searchHouseList(value)
    }
    fetchData()
  },[])

// 接收 子组件Filter 中的筛选条件数据
  const onFilter = filters => {
    // 返回页面顶部
    window.scrollTo(0, 0)
    setFilters(filters)
    // 调用获取房屋数据的方法
    // searchHouseList(value)
  }
}

其结果是完全没有将所在城市的数据显示出来，即获取不了任何数据
请问是什么原因导致需要点击第二次才能显示出筛选后的数据？正确的代码是什么？恳请展示代码进行举例说明