Why is onBlur not working?

Question

React

Why doesn't the select "collapse" when clicking anywhere on the page? And how to fix it?
You can touch it here - Codesandbox

import React from "react";
import ReactDOM from "react-dom";

import Select, { components } from "react-select";

const styles = {
  option: styles => ({
    ...styles,
    backgroundColor: "#ffff",
    color: "black"
  })
};

const Option = props => (
  <components.Option {...props}>
    <input type="checkbox" checked={props.isSelected} readOnly />
    <label>{props.data.label}</label>
  </components.Option>
);

const ValueContainer = ({ children, selectProps, ...props }) => {
  console.log(selectProps);
  const { getValue, hasValue } = props;
  const countSelectedVal = getValue().length;
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }
  return (
    <components.ValueContainer {...props}>
      {`${selectProps.messages.orderPageAnySelectPreText}: ${countSelectedVal}`}
    </components.ValueContainer>
  );
};

const OrderSelectMulti = ({ options, ...props }) => {
  const components = { ValueContainer, Option };
  const messages = {
    orderPageAnySelectPreText: "Selected"
  };
  return (
    <Select
      styles={styles}
      isMulti
      closeMenuOnSelect={false}
      messages={messages}
      components={components}
      hideSelectedOptions={false}
      options={[
        { value: "Status1", label: "Status1" },
        { value: "Status2", label: "Status2" },
        { value: "Status3", label: "Status3" }
      ]}
      placeholder="BlaBla"
      {...props}
    />
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<OrderSelectMulti />, rootElement);