When using a controlled Select with a custom ValueContainer the select won't open

[wilmanh]

Hello Everyone, first and foremost Kudos on this package, it is pretty amazing.

I am having a problem when I use react-select with a custom ValueContainer and a controlled select, the Select will not open, well.

I think is triggering both onMenuOpen and onMenuClose almost at the same time

I was able to reproduce the error on Playcode so here it is https://playcode.io/2514348

I will also copy the code here

import React, { useState } from 'react';
import Select from 'react-select';
import { components } from 'react-select';

export const flavourOptions = [
  { value: { name: 'vanilla' }, label: 'Vanilla' },
  { value: { name: 'chocolate' }, label: 'Chocolate' },
  { value: { name: 'strawberry' }, label: 'Strawberry' },
  { value: { name: 'saltedcaramel' }, label: 'SaltedCaramel' },
];

export const customValueContainer = ({ children, ...props }) => {
  return (
    <components.ValueContainer {...props}>{children}</components.ValueContainer>
  );
};

export function App(props) {
  const [open, setOpen] = useState(false);
  const [open1, setOpen1] = useState(false);

  return (
    <div className='App'>
      <h2>First Select work properly</h2>
      <Select
        isClearable
        isMulti
        menuIsOpen={open}
        placeholder='label'
        role='list'
        closeMenuOnSelect={false}
        hideSelectedOptions={false}
        ariaLabel='dropdown-input'
        isClearable
        onMenuClose={e => {
          setOpen(false);
        }}
        onMenuOpen={e => {
          setOpen(true);
        }}
        options={flavourOptions}
      />
      <h2>Second also works!</h2>
      <Select
        isSearchable
        placeholder='label'
        role='list'
        ref={undefined}
        closeMenuOnSelect={false}
        hideSelectedOptions={false}
        ariaLabel='dropdown-input'
        components={{
          ValueContainer: props => {
            return customValueContainer(props);
          },
        }}
        options={flavourOptions}
      />
      <h2>Third one has an error </h2>
      <Select
        onMenuClose={e => {
          setOpen1(false);
        }}
        onMenuOpen={e => {
          setOpen1(true);
        }}
        menuIsOpen={open1}
        isSearchable
        placeholder='label'
        role='list'
        ref={undefined}
        closeMenuOnSelect={false}
        hideSelectedOptions={false}
        ariaLabel='dropdown-input'
        components={{
          ValueContainer: props => {
            return customValueContainer(props);
          },
        }}
        options={flavourOptions}
      />
    </div>
  );
}