Click on Button do not open input field. Rather it close the dropdown Menu

[dhakalsamundra]

My select have following code:

<Select
          className="sui-w-64"
          options={options}
          aria-label="input-abc"
          name="input-abc"
          components={{ MenuList }}
          isMulti
          menuIsOpen={open}
          onMenuOpen={() => setOpen(true)}
          onMenuClose={() => setOpen(false)}
          closeMenuOnSelect={false}
          hideSelectedOptions={false}
        />

When I click on the button, I want to show the input field but because of the onMenuClose, I can not able to show the input field on button click inside MenuList components. Here is the code for this:

 const handleAddNew = async (e: React.MouseEvent<HTMLElement>) => {
    console.log('boolean value in clicking on the add new button', props.selectProps.menuIsOpen);
    console.log('onMenuClose value in clicking on the add new button', props.selectProps.onMenuClose);
    // props.selectProps.menuIsOpen = true;
    e.stopPropagation();
    e.preventDefault()
    setShowInputField(true);
  };

HELP WILL BE APPRECIATED. AS I DID NOT FIND A WAY TO FIX THIS.

Screen.Recording.2023-05-26.at.16.57.54.mov