React onBlur event currentTarget and relatedTarget are null

Question

I have an MUI icon that makes a div (absolute positioned) appear. I want to "close" the div whenever the user clicks outside of it. I read some solutions here and I'm trying to close the div using onBlur event. It works fine if I click outside of it however if I click in children elements of the div it closes too. I'm trying to use this approach however the currentTarget and the relatedTarget are null. I added tabIndex={0} as pointed out here still not working though.

Here is the code:

const handleCogClick = () => {
 setShouldShowSettingsMenu(true);
};


<SettingsIcon
 sx={{ fontSize: "50px" }}
 tabIndex={10}
 onFocus={handleCogClick}
 onBlur={(event) => {
  console.log("event ", event);
  if (!event.currentTarget.contains(event.relatedTarget)) {
   setShouldShowSettingsMenu(false);
  }
 }}
/>