Как в Material UI React динамически менять содержимое Popover в зависимости от активного элемента?

Question

[AlexCraft]

Пример компонента:

import React, { useState } from 'react'
import { makeStyles, createStyles } from '@material-ui/core/styles'
import { Box, Grid, Paper, Typography, Popover } from '@material-ui/core'

const useStyles = makeStyles(theme =>
  createStyles({
    root: { flexGrow: 1 },
    menu_panel: { minHeight: 90 },
    debug: { border: 'solid 1px green' },
    item_text: { color: '#727681' },
    item: { height: 88 },
    divider: { borderRight: '1px solid #a6b0cb', minWidth: 200 },
    cpointer: { cursor: 'pointer' },
    unselectable: { MozUserSelect: 'none', KhtmlUserSelect: 'none', userSelect: 'none' },
    popover: { pointerEvents: 'none' }
  })
)

const DocsActionsMenu = () => {
  const classes = useStyles()
  const [anchorEl, setAnchorEl] = useState(null)
  const anchorEls = [
    {
      id: 1,
      title: 'Получить документ',
      icon_url: '/assets/icons/icon_docs.png',
      popup_content: [
        { id: 1, title: 'item1_1' },
        { id: 2, title: 'item1_2' }
      ]
    },
    {
      id: 2,
      title: 'Изменить',
      icon_url: '/assets/icons/icon_pencil.png',
      popup_content: [
        { id: 1, title: 'item2_1' },
        { id: 2, title: 'item2_2' }
      ]
    },
    { id: 3, title: 'Получить документ', icon_url: '/assets/icons/icon_1c.png' },
    { id: 4, title: 'Резервировать', icon_url: '/assets/icons/icon_reserve.png' },
    { id: 5, title: 'Варианты оплаты', icon_url: '/assets/icons/icon_pay.png' },
    { id: 6, title: 'Забрать заказ', icon_url: '/assets/icons/icon_docs.png' },
    { id: 7, title: 'Сбросить фильтры', icon_url: '/assets/icons/icon_arrow_ring.png' }
  ]

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget)
  }

  const handlePopoverClose = () => {
    setAnchorEl(null)
  }

  const open = Boolean(anchorEl)

  // console.log(anchorEl)

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Box mx={4} mt={2}>
            <Paper>
              <Box
                display="flex"
                flexDirection="row"
                alignItems="center"
                justifyContent="space-around"
                className={(classes.menu_panel, classes.cpointer)}
              >
                {anchorEls.map(i => (
                  <Box
                    width="100%"
                    key={i.id}
                    title={i.title}
                    aria-owns={open ? 'mouse-over-popover' : undefined}
                    aria-haspopup="true"
                    onMouseEnter={handlePopoverOpen}
                    onMouseLeave={handlePopoverClose}
                  >
                    <Box
                      display="flex"
                      flexDirection="row"
                      alignItems="center"
                      justifyContent="space-around"
                      className={classes.divider}
                    >
                      <Box
                        display="flex"
                        flexDirection="column"
                        alignItems="center"
                        justifyContent="center"
                        className={classes.item}
                      >
                        <Box className={classes.unselectable}>
                          <img src={i.icon_url} alt={i.title} />
                        </Box>
                        <Box mt={1}>
                          <Typography className={(classes.item_text, classes.unselectable)} noWrap>
                            {i.title}
                          </Typography>
                        </Box>
                      </Box>
                    </Box>
                  </Box>
                ))}
              </Box>
            </Paper>
          </Box>
        </Grid>
      </Grid>
      <Popover
        id="mouse-over-popover"
        className={classes.popover}
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left'
        }}
        onClose={handlePopoverClose}
        disableRestoreFocus
        // getContentAnchorEl
      >
        <Typography variant="body2">popover</Typography>
      </Popover>
    </div>
  )
}

export default DocsActionsMenu