Close-On-Click-Away not working when MUI custom field is inside component

In my React component I have a sidebar menu, CustomizeComponentSidebar that in turn contains several other custom html tags. One of them is MUI’s Multiple Select. I made a close-on-click-outside functionality for using useRef. Everything is fine except if I click on MUI’s Multiple Select field, it traces the click as outside the component and closes it. I also tried using MUI’s ClickAwayListener instead, with the same result. Any help appreciated

    const handleClickOutside = (event) =>
    ref.current && !ref.current.contains(event.target) && resetSidebar();

useEffect(
    () => {
        document.addEventListener("click", handleClickOutside, true);

        return () => document
            .removeEventListener("click", handleClickOutside, true);
    },
    [customizeComponentMenu.open]
);

……..

                    <div ref={ ref } className="position-absolute">
                        <CustomizeComponentSidebar
                            props={ props }
                    />
                   </div>

///SelectField looks like this

    return (
    <div>
        <FormControl sx={ { m: 1, width: 300 } }>
            <InputLabel id="demo-multiple-name-label">Select</InputLabel>
            <Select
                labelId="demo-multiple-name-label"
                id="demo-multiple-name"
                multiple={ props.configuration.multipleOptions }
                value={ getValue() }
                onChange={ handleChange }
                input={ <OutlinedInput label="Option" /> }
                MenuProps={ MenuProps }
            >
                { options.map((option) => 
                    (
                        <MenuItem
                            key={ option }
                            value={ option }
                            style={ getStyles(option, optionName, theme) }
                        >
                            { option }
                        </MenuItem>
                    ))
                }
            </Select>
        </FormControl>
    </div>
);

};

export default SelectField;