So it’s a known bug of react-select AsyncPaginate where the dropdown closes as soon as you select an option in a multi-option dropdown. Which shouldn’t be the case.
Basically ‘closeMenuOnSelect’ doesn’t work as intended if we use Creatable react-select.

So I am left with no option but to have a workaround using useRef. Intention is to close the dropdown menu if the user clicks outside the dropdown menu. However, I do not know how to hook the ref with the dropdown menu, since I can’t access it’s div.

export const AsyncSelectField = ({props}) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const dropDownRef = useRef(null);

  const handleMenuClose = () => {
    if (isMulti) {
      // If isMulti is true, reopen the menu
      setMenuOpen(true);
    } else {
      // Otherwise, just close the menu
      setMenuOpen(false);
    }
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropDownRef.current && !dropDownRef.current.contains(event.target)) {
        setMenuOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuOpen]);
 }

  const Option = (props) => {
    return (
      <components.Option {...props}>
        <RenderOption {...props} />
      </components.Option>
    );
  };

  // single select
  const SingleValue = (props) => {
    return (
      <components.SingleValue {...props}>
        <RenderSingleValue {...props} />
      </components.SingleValue>
    );
  };

  const CreatableAsyncPaginate = withAsyncPaginate(Creatable);
  const AsyncPaginateField = useMemo(
    () => (isCreateable ? CreatableAsyncPaginate : AsyncPaginate),
    [CreatableAsyncPaginate, isCreateable],
  );

return (
    <AsyncSelectFieldStyled ref={dropDownRef} className={className} disabled={disabled}>
      {label && (
        <div className="label" data-testid="label">
          <Typography color="#2B3952">{label}</Typography>
          {optional && <div className="optionalField">(Optional)</div>}
          {description && (
            <div data-testid="description" className="info-icon">
              <Description description={description} />
            </div>
          )}
        </div>
      )}
      <AsyncPaginateField
        key={id}
        id={id}
        className="async-paginated-select"
        classNamePrefix="react-select"
        value={value}
        isMulti={isMulti}
        closeMenuOnSelect={!isMulti}
        menuIsOpen={menuOpen}
        onMenuClose={handleMenuClose}
        onMenuOpen={() => setMenuOpen(true)}
        hideSelectedOptions={hideSelectedOptions}
        options={options}
        loadOptions={loadOptions}
        loadOptionsOnMenuOpen={false}
        onChange={(newValue) => onChange(newValue)}
        placeholder={placeholder}
        getOptionValue={(option) => option.value}
        backspaceRemovesValue={backspaceRemovesValue}
        getOptionLabel={(option) => option.label}
        isClearable={isClearable}
        isOptionDisabled={isOptionDisabled}
        components={{
          Option,
          SingleValue,
          IndicatorSeparator: () => <span />,
          DropdownIndicator: () =>
            isLoading ? (
              <Box className="loading-bar-wrapper">
                <Loader isCircular size={15} />
              </Box>
            ) : (
              showDropdownIcon && <div className="caret-icon">{<ArrowDropDownIcon />}</div>
            ),
          ...(!showMenuList && { MenuList: () => null }),
        }}

What can I do to make this work? How can I assign the ref to the dropdown menu?