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

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>
  );
}

Run the linked Playcode reproduction and compare the controlled Select with and without the custom ValueContainer. Trace the controlled Select path involving menuIsOpen, onMenuOpen, and onMenuClose. Done means the third Select opens reliably without immediately closing, while the reported callbacks retain the expected behavior.