how to close "checkbox" dropdown onBlur in js?

I have a dropdown done by invisible checkbox. This dropdown is working ok, but it doesn't want to close unless I click on the label again.

The issue is that onBlur is never got called. Why? If I set onMouseOut - it triggers ok, but it closes the dropdown immedeately.

I've seen How to hide a dropdown when the user clicks outside of it but I didn't figure how to pass props to the very last solution...

        <div onBlur ={handleUncheckCheckbox} className="dropdown">
            <input id="check01" type="checkbox" name="menu"/>
            <label for="check01" className="sorting-element">click me</label>
            <div className="dropdown-content">
                <p>1</p>
                <p>2</p>
                <p>3</p>
            </div>
        </div>