When using ValueContainer as a custom component, if children is not rendered, the menu does not close when clicking outside

I'm using the react-select 5.8.3 version, and I'm using components properties to extend the ValueContainer to custom components, and I'm writing this after finding an issue.

When using a multi-select, I implemented a conditional statement as shown below to customize the appearance of the ValueContainer as a custom component.

// my custom ValueContainer.tsx
function ValueContainer(props: ValueContainerProps<OptionBase[] | OptionBase>) {
  const {
    children,
    selectProps: { value, isMulti },
  } = props;

  if (!isMulti) {
    return <components.ValueContainer {...props}>{children}</components.ValueContainer>;
  }

  const valueLength = Array.isArray(value) ? value.length : 0;
  const text = valueLength > 0 ? {{MY_CUSTOM_TEXT}} : children; // If isMulti is true and there is at least one selected value, it renders custom text.

  return <components.ValueContainer {...props}>{text}</components.ValueContainer>; // clicking outside the Select’s DOM does not close the menu
}

It seems that when children is not rendered in the ValueContainer as per the condition mentioned above, the menu close does not work when clicking outside.

Start with the custom ValueContainer.tsx example and reproduce the behavior using react-select 5.8.3, focusing on the multi-select path where children is replaced. Then trace the Select outside-click handling and ValueContainer integration; done means the menu closes when clicking outside even when custom text is rendered.