React js click outside of the component does not work - reactjs

Question

I have a component in my react s application where i use ClickAwayListener from #mui/material/ClickAwayListener.
export default function MultipleSelectChip() {
const theme = useTheme();
const [personName, setPersonName] = React.useState([]);
const handleChange = (event) => {
const {
target: { value }
} = event;
setPersonName(
// On autofill we get a the stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<div>
{[1, 2, 3].map(() => {
return (
<div>
<ClickAwayListener onClickAway={() => console.log("click outside")}>
<FormControl sx={{ m: 1, width: 300 }}>
<InputLabel id="demo-multiple-chip-label">Chip</InputLabel>
<Select
labelId="demo-multiple-chip-label"
id="demo-multiple-chip"
multiple
value={personName}
onChange={handleChange}
input={
<OutlinedInput id="select-multiple-chip" label="Chip" />
}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</ClickAwayListener>
</div>
);
})}
</div>
);
}
I expect to trigger onClickAway function only when i click outside a dropdown. But when i click the dropdown plus when i select an option the function also is triggered and i don't understand why. Hw to get the expected behaviour when click outside one of the dropdown? NOTE: the functionality works if i don't use map(), meaning without many dropdowns. demo: https://codesandbox.io/s/multipleselectchip-material-demo-forked-n03vq?file=/demo.js:1080-2905