Поповервер материала не открывается на привязке

Question

Я пытаюсь, чтобы при наведении курсора на значок появлялся всплывающий значок. Я попытался адаптировать код отсюда https://material -ui.com / components / popover / # mouse-over-взаимодействия . Мое решение ниже. Я попытался удалить некоторые из сложностей настройки проекта, но для ясности пришлось добавить некоторые дополнительные вещи.

export interface Props {
  popoverAnchor?: HTMLElement;
  setPopoverAnchor: (anchor?: HTMLElement) => void;
}

визуализации ()

const {
  popoverAnchor,
  setPopoverAnchor
} = this.props;


const open = Boolean(popoverAnchor);

return(

...

  <div className={classes.flex}>
    <HelpOutlineIcon
      aria-owns={open ? 'mouse-over-popover' : undefined}
      aria-haspopup="true"
      onMouseEnter={(event: any) => {
        setPopoverAnchor(event.currentTarget)
      }}
      onMouseLeave={() => setPopoverAnchor()}
    />
    <Popover
      id="mouse-over-popover"
      className={(classes.popover)}
      classes={{
        paper: classes.paper,
      }}
      open={open}
      anchorEl={popoverAnchor}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      transformOrigin={{
        vertical: 'top',
        horizontal: 'left',
      }}
      onClose={() => setPopoverAnchor()}
      disableRestoreFocus
    >
      <Typography>I use Popover.</Typography>
    </Popover>
  </div>

constants.ts

export const SET_POPUP_ANCHOR = 'SET_POPUP_ANCHOR';
export type SET_POPUP_ANCHOR= typeof SET_POPUP_ANCHOR;

store.ts

export interface State {
  anchor?: HTMLElement;
}

actions.ts

export interface SetPopupAnchor {
  type: constants.SET_POPUP_ANCHOR;
  anchor?: HTMLElement;
}

export type Action = SetPopupAnchor;

export function handlePopoverAnchor(anchor?: HTMLElement): SetPopupAnchor {
  return {
    type: constants.SET_POPUP_ANCHOR,
    anchor: anchor
  }
}

DemoContainer.ts

export function mapDispatchToProps(dispatch: Dispatch<actions.AnonymizationAction>) {
  return {
    setPopoverAnchor: (anchor?: HTMLElement) => dispatch(actions.handlePopoverAnchor(anchor))
  }
}

Это вообще не создает никакого всплывающего окна, и на консоли не появляется никаких ошибок. после отладки я увидел, что объект element успешно проходит весь путь до действия handlePopoverAnchor, что означает, что состояние должно быть изменено.