react，父子组件传值，显示出来的数据没有按照筛选的条件进行显示？

在使用的react版本如下：

父组件HouseList代码：

function HouseList() {
// ...
  const [filters, setFilters]  = useState({})
  const onFilter = filters => {
    setFilters(filters)
  }
// ...
}

子组件Filter代码：

function Filter(props) {
// ...
  const onSave = (type, itemValue) => {
// ...
    const { area, mode, price, more } = newSelectedValues
    // 此处可以成功获取到四项筛选数据
    console.log('区域',area)
    console.log('方式',mode)
    console.log('租金',price)
    console.log('筛选',more)
    // 筛选条件数据
    const filters = {}

    // 以下代码就不能将获取到的四项筛选数据传给filters，暂时未找到原因何在
    // 区域
    const areaKey = area[0]
    let areaValue = 'null'
    if (area[3] !== 'null') {
      areaValue = area[3]
    } else if (area[3] === 'null' && area[2] !== 'null') {
      areaValue = area[2]
    } else if (area[2] === 'null' && area[1] !== 'null') {
      areaValue = area[1]
    } else if (area[1] === 'null' && area[0] !== 'null') {
      areaValue = area[0]
    }
    filters[areaKey] = areaValue
    console.log('位置1',areaValue)

    // 方式和租金
    filters.mode = mode[0]
    console.log('位置2',mode[0])

    filters.price = price[0]
    console.log('位置3',price[0])

    // 更多筛选条件 more
    filters.more = more.join(',')
    console.log('位置4',more.join(','))

    // 调用父组件中的方法，来将筛选数据传递给父组件
    props.onFilter(filters)
    console.log('位置5',filters)
    console.log('位置6',props.onFilter(filters))
// ...
}
}