Custom MenuList with Button

[simplymequeeny]

Hi,
I have a custom menu list

const SelectMenuButton = (props) => {
        return (
            <span style={{backgroundColor: "white"}}>
                <components.MenuList {...props}>
                    {props !== null && props.children && props.children.length > 0 &&
                        props.children
                    }
                </components.MenuList>
                <Button variant="primaryNoHoverStateChange" style={{width: "100%", marginTop: props.children && props.children.length > 0 ? "5px" : "0"}}
                        onClick={() => {
                            setIsKeepMenuOpen(false);
                            setECCOptions(selectedECCs);
                        }}>
                    Select
                </Button>
            </span>
        ) 
    }

                 <div style={{float: "right", position: "relative"}}>
                        <label style={{display: "inline-block", paddingRight: "10px"}}>ECC:</label>
                        <Select
                            id={"ecc-select"}
                            value={eccCodes}
                            options={eccs}
                            placeholder="All ECCs"
                            isClearable={false}
                            isMulti
                            onChange={(selections) => {
                                setSelectedECCs(selections);
                                let codes = [];
                                selections.forEach((item) => codes.push({value: item.value, label: item.value}));
                                setECCCodes(codes);
                            }}
                            components={{DropdownIndicator, IndicatorSeparator: () => null, MenuList: SelectMenuButton}}
                            styles={eccCustomStyle}
                            isLoading={isLoading}
                            noOptionsMessage={() => 'No Matches Found'}
                            menuIsOpen={isKeepMenuOpen}
                            hideSelectedOptions={!isKeepMenuOpen}
                            onFocus={() => setIsKeepMenuOpen(true)}
                            onBlur={() => {setIsKeepMenuOpen(false)}}
                        />
                    </div>

whenever I click the button 'Select', I could not open the menu anymore, I would have to click outside the control in order to open it again.
I am thinking to programmatically call blur() but i dont know how.
or is there other solution to my issue?