反应无法使用ClickAwayListener和Material UI Dialog来关闭对话框

I'm currently using material-ui in my react project. These components are material-ui components. I am trying to use ClickAwayListener with Dialog to detect when clicked outside so that I can close the Dialog when clicked outside.

But since the button click is technically a click outside the dialog, the Dialog does not open as the onClickAway listener fires immediately closing the Dialog.

What I want to do is, I want to close the Dialog when I click outside the dialog. Is there any way I could do it with this?

<iframe src="https://codesandbox.io/embed/989y0758np?fontsize=14" title="989y0758np" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>