React-Bootstrap搜索在下拉组件内部不起作用

Question

来自react-bootstrap documentation 我得到这个例子。

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
  <a
    href=""
    ref={ref}
    onClick={(e) => {
      e.preventDefault();
      onClick(e);
    }}
  >
    {children}
    &#x25bc;
  </a>
));

const CustomMenu = React.forwardRef(
  ({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
    const [value, setValue] = useState('');

    return (
      <div
        ref={ref}
        style={style}
        className={className}
        aria-labelledby={labeledBy}
      >
        <FormControl
          autoFocus
          className="mx-3 my-2 w-auto"
          placeholder="Type to filter..."
          onChange={(e) => setValue(e.target.value)}
          value={value}
        />
        <ul className="list-unstyled">
          {React.Children.toArray(children).filter(
            (child) =>
              !value || child.props.children.toLowerCase().startsWith(value.toLowerCase()),
          )}
        </ul>
      </div>
    );
  },
);

如果我有此代码，一切都会正常

render(
  <Dropdown>
    <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
      Custom toggle
    </Dropdown.Toggle>

    <Dropdown.Menu as={CustomMenu}>
      <Dropdown.Item eventKey="1">Red</Dropdown.Item>
      <Dropdown.Item eventKey="2">Blue</Dropdown.Item>
      <Dropdown.Item eventKey="3" active>
        Orange
      </Dropdown.Item>
      <Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>,
);

但是如果我在下拉菜单项中添加元素怎么办？

<Dropdown.Item eventKey="1" className="dropdown-menu__item d-flex flex-column">
  <span>Element</span>
  <span>OtherElement</span>
  <div className="no-access">
     <span>No access</span>
  </div>
</Dropdown.Item>

这会破坏一切。

我尝试这样写

<ul className="list-unstyled">
    {Children.toArray(children).map(child => {
         return [...child.props.children].filter(el => {
              if( isValidElement(el) ){
                   return [];
              } 
              return !value || el.toLowerCase().startsWith(value.toLowerCase());
         })
    })}

但是过滤器不起作用，我只需要过滤span标签内的元素。我已经挣扎了2天。

Codesandbox Demo