如何在列表组件中使用相关的过滤器？

Question

我正在尝试在我的应用内的<List>组件中使用一种“相关过滤器”。
这个想法类似于您使用带有国家/地区名称的过滤器，然后选择一个，第二个过滤器，第一个过滤器将具有与国家/地区相关的城市名称。

我制作了一个这样的自定义组件：

const CityFilter = props => {
  return (
    <Fragment>
      <Country {...props} />
      <FormDataConsumer>
        {({ formData, ...rest }) => (
         <SelectInput 
           {...props} 
           label="City" 
           source="cityId" 
           optionText="name" 
           optionValue="id"
           choices={getCitiesfor(formData.countryId)}
           parse={(v) => parseInt(v)}
           {...rest}
         />
       )}
      </FormDataConsumer>
    </Fragment>);
};

，效果很好，但是问题在于，关闭过滤器组件后，<List>仍然保持过滤状态。 那么，还有其他方法可以做到吗？或我该怎么解决这个问题？

谢谢。