Custom Menu, onClick label closes the react-select menu

Thanks for using react-select!

I have a custom react-select menu and it is added like this:

<Select
    placeholder={'Placeholder}
    components={{
        Menu: CustomMenu,
    }}
    className="ml-6"
    closeMenuOnSelect={false}
></Select>

and if I have some checkbox in the "CustomMenu" component with label and if the label has htmlFor="inputId" onClick on the label, the menu is closed. does anybody know how to solve this problem? i thought that closeMenuOnSelect="false" will solve the problem, but that is not the case... this is the code for customMenu

    const CustomMenu = (props: MenuProps) => {
        return (
            <components.Menu className="react-select--availability" {...props}>
                <div>
                    <input type="checkbox" id="saka-test" />
                    <label htmlFor="saka-test">grdonifgeornh</label>
                </div>
            </components.Menu>
        );
    };

here is the sandbox with an example:

https://codesandbox.io/s/jovial-roentgen-ptqe7?file=/src/App.js

Start with the reproduction in the linked CodeSandbox, especially src/App.js and the CustomMenu component shown in the issue. Trace how clicking the label interacts with the custom menu and closeMenuOnSelect; done means clicking the checkbox label no longer closes the menu while preserving normal selection behavior.