React Apex-Charts: anchorEl invalid issue when using custom toolbar icon with 'material-ui' Popover

I've defined react-apexcharts custom tool bar icon to display a popover when user clicks it. I'm using a common popover to use with all the charts on the page and passing the target element to determine the position to display it. It works perfectly with all other charts except line and area charts. For line and area charts I'm getting following error and the popover is displaying top left corner.

Material-UI: The anchorEl prop provided to the component is invalid. The anchor element should be part of the document layout. Make sure the element is present in the document or that it's not display none

Works fine with pie and other charts,

But for both line and area charts it pops in the top left corner,

This is how I add the custom icon,

        toolbar: {
          show: true,
          tools: {
            download: false,
            customIcons: [{
              icon: `<span class="material-icons">filter_alt</span>`,
              index: 0,
              title: 'Chart filter',
              class: 'custom-icon',
              click: (chartDetails, chartOptions, e) => {
                setPopover({ ...popover, anchorEl: e.target})
              }
            }]
          }
        }

And, my popover is defined as follows,

      <Popover
        open={Boolean(popover.anchorEl)}
        onClose={handleCancel}
        anchorEl={popover.anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        // Contents
      </Popover>

It's very strange that it works fine for other charts and only affects for line and area chart.

Anyone have any idea why this is happening or has this happened to anyone before?