Popover component - onExited callback doesn't work , material ui

Question

        <Popover
              key={element.name}
              classes={{
                paper: classes.paper
              }}
              open={open}
              anchorEl={this.myRef.current}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left'
              }}
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left'
              }}
              BackdropProps={
                {
                  classes: { root: classes.backdrop }
                }
              }
              onExited={this.handlePopoverClose}
            >

onExited callback doesn't work , onClose work well , pls help me find out why does it happens , is it issue on material ui , or in my code ?? I also have tried to use onMouseLeave and it is also doesn't work

 paper: {
      display: 'grid',
      justifyContent: 'center',
      backgroundColor: palette.common.black,
      flexFlow: 'wrap',
      width: 1128,
      height: 432,
      borderRadius: '0 0 8px 8px',
      padding: '56px 40px 66px 40px',
      overflow: 'hidden',
      gridTemplateColumns: 'auto auto auto auto',
      position: 'absolute',
      zIndex: 20
    },

 backdrop: {
      background: 'transparent',
      zIndex: 20
    },

Above you can find css styles which I assign for this Popover

Answer 1

The onExited event is fired when the Popover has successfully closed. In order to do this you need to first call a function that closes the Popover.

<Popover
  key={element.name}
  open={open}
  anchorEl={this.myRef.current}
  onClose={this.handlePopoverClose}
  onExited={() => console.log("The Popup closed")}
>
  ...
</Popover>