自定义ValueContainer后react-select点击外部无法关闭的问题求助

大家好，我在基于react-select封装自定义筛选组件时遇到了个棘手的问题，想请各位帮忙看看。

我实现了一个自定义的ValueContainer组件，用来处理多选时的显示逻辑：当选中1-3个选项时，直接展示所有选中项的标签；超过3个的话，就显示前3个标签再加+N的形式。代码如下：

const Filters = ({ label, placeholder, value, options, onChange}) => {
  return (
    <FiltersStyled>
      <h4>{label}</h4>
      <div>
        <Select 
          placeholder={placeholder} 
          value={value} 
          onChange={onChange} 
          isClearable={false} 
          options={options} 
          isMulti 
          closeMenuOnSelect={false} 
          noOptionsMessage={() => ''} 
          hideSelectedOptions={false} 
          components={{ ValueContainer }} 
        />
      </div>
    </FiltersStyled>
  )
}

const ValueContainer = ({ hasValue, children, getValue, ...props }) => {
  let [values, input] = children;

  if (Array.isArray(values)) {
    const { length } = values;
    if (getValue().length > 0 && getValue().length <= 3) {
      values = getValue().map(x => x.label).join(', ')
    } else {
      const otherCount = length - 3;
      values = getValue().slice(0, 3).map(x => x.label).join(', ') + ` + ${otherCount}`
    }
  }

  return (
    <Select.components.ValueContainer {...props}>
      {values}
      {!hasValue && input}
    </Select.components.ValueContainer>
  );
}

现在的问题是：

• 用components={{ ValueContainer }}的写法时，自定义的显示逻辑正常工作，但点击下拉框外部区域时，下拉菜单不会自动关闭，必须手动点击下拉箭头或者选中选项才能关闭。
• 如果把components={{ ValueContainer }}改成components={ ValueContainer }，自定义的显示逻辑就失效了，组件变回了react-select默认的ValueContainer样式。

有没有大佬知道这是哪里出问题了？怎么才能在保留自定义显示逻辑的同时，让点击外部区域能正常关闭下拉菜单呢？

备注：内容来源于stack exchange，提问作者user10863293