Cant close from outside click when adding custom ValueContainer

[ljmerza]

I want to be able to select multiple values with out the menu closing so i set

closeMenuOnSelect={false}
hideSelectedOptions={false}
closeMenuOnScroll
isMulti

i also need a custom VaueContainer but when the ValueContainer is added now the menu wont close when i click outside the dropdown menu. see example

https://codesandbox.io/p/sandbox/codesandboxer-example-forked-4xsjkl

edit: was able to figure this out and updated the example for those who need this:

const animatedComponents = makeAnimated();

const ValueContainer = ({ children, ...props }) => {
  const value = props.getValue();
  const plural = value.length > 1 ? "s" : "";
  return (
    <components.ValueContainer {...props}>
      {value.length === 0 ? null : `${value.length} Item${plural} Selected`}
      {children}
    </components.ValueContainer>
  );
};

const Placeholder = ({ children, ...props }) => {
  return (
    <components.Placeholder {...props}>
      {`Select ${props.selectProps.name}...`}
    </components.Placeholder>
  );
};

export default () => (
  <Select
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    options={colourOptions}
    closeMenuOnSelect={false}
    hideSelectedOptions={false}
    components={{
      ...animatedComponents,
      Placeholder,
      ValueContainer,
    }}
  />
);