如何在带有Typescript的React中传递带有所需道具的组件数组？

Question

我正在尝试制作一个通用的过滤组件，该组件接受带有所需道具的一系列组件（处理性别过滤，年龄过滤等的组件）。例如，Filter组件将处理背后的逻辑，并将呈现任何接受changeUrlSearch的子组件。我尝试了几种方法，但没有任何效果。问题是，如果我传递未实现此方法的组件，它将不会引发错误。

有没有办法做到这一点？ 这是我的方法。

interface ChildrenProps {
  hello: (...any) => any;
}

interface FiltersProps<T> {
  filters: T;
}

function Filters<T extends React.FC<ChildrenProps>[]>({ filters }: FiltersProps<T>) {
  return (
    <>
      {filters.map((Component) => (
        <Component hello={() => {}} />
      ))}
    </>
  );
}

export default Filters;

这是Filters组件的呈现。但是，即使这些组件不接受hello函数作为道具，它也不会引发错误。

<Filters filters={[DateTypeFilter, DateFilter]} />

我创建了一个带有可能解决方案的CodeSandbox项目。但是，我觉得不合适。为什么我不能使用React.FC？