要写一个下拉列表：数据在在前端，本身是一个列表，但为了方便收纳，于是写了分组，所以数据是类似:
type List = (Option | OptionGroup) []
type OptionGroup = { name :string , options: List}
问题一：选项列表无法显示
<MenuItem>列表渲染为 List ，包含了 Group属性，这样可以做到一个分组，同时也需要多一个组件包装，这是就出现了问题：Select列表显示为空。
然后开始研读Select组件文档
-
以为是
<ul>标签下面只能为<li>，于是高级组件返回<li>根标签但是没有效果
-
select列表是一个子组件收集过程，猜测是ref传递，于是用
React.forwardRef传递ref到返回的<MenuItem>，也是没反应
试着看下源码
翻看Menu相关源码
const handleRef = useForkRef(listRef, ref);
于是觉得值的传递应该用了useContext，不直接用子组件直接传递。但又找不到相关接口。
又看到这段直接相关代码
if (process.env.NODE_ENV !== 'production') {
if (isFragment(child)) {
console.error(
["MUI: The Menu component doesn't accept a Fragment as a child.",
'Consider providing an array instead.',
].join('\n'),
);
}
}
于是试着返回数组，但也不行。
试着再谷歌一下
然后用了 custom item的字眼，看到了这篇解答
讲到了会直接读取子组件的value属性，我试了下，无效。
最后用到了他推荐的方法，不写自定义组件，而是直接写方法返回，就不用再包装组件。
问题二：过滤失效
useState定义了search字段，然后传递入方法过滤，问题是search字段更新，方法无法触发，或许可以其它强行触发
后面分组名称无需显示，所以对List预处理为Option[]，Option关联search，问题自然消失了。
