Как я могу использовать всплывающее окно material-ui с действиями material-table в реакции?

Я новичок в React, и это моя первая страница, которую я создал, я использую material-table и material-ui, чтобы помочь мне.

Это мой код:

import React, { useState, useEffect } from 'react';
import { Fade } from "@material-ui/core";
import MaterialTable from 'material-table';
import { makeStyles } from '@material-ui/core/styles';

import api from '../../services/api.js';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        width: '70%',
        margin: 'auto',
        marginTop: 20,
        boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.4)'
    }
}));

function User(props) {
    const classes = useStyles();
    const [checked, setChecked] = useState(false);
    const [tableData, setTableData] = useState([]);

    let config = {
        columns: [
            { title: 'Name', field: 'name' },
            { title: 'Sector', field: 'sector' },
            { title: 'E-mail', field: 'email'},
            { title: 'Tel', field: 'tel'}
        ],
        actions: [
            { icon: 'create', tooltip: 'Edit', onClick: (event, rowData) => alert('Edit')},
            { icon: 'lock', tooltip: 'Block', onClick: (event, rowData) => alert('Block')},
            { icon: 'delete', tooltip: 'Delete', onClick: (event, rowData) => alert('Delete') },
            { icon: 'visibility', tooltip: 'Last Access', onClick: (event, rowData) => alert('Last') },
            { icon: "add_box", tooltip: "Add", position: "toolbar", onClick: () => { alert('Add') } }
        ],
        options: {
            headerStyle: { color: 'rgba(0, 0, 0, 0.54)' },
            actionsColumnIndex: -1,
            exportButton: true,
            paging: true,
            pageSize: 10,
            pageSizeOptions: [],
            paginationType: 'normal'
        },
        localization: {
            body: { 
                emptyDataSourceMessage: 'No data' 
            },
            toolbar: { 
                searchTooltip: 'Search',
                searchPlaceholder: 'Search',
                exportTitle: 'Export'
            },
            pagination: {  
                labelRowsSelect: 'Lines',
                labelDisplayedRows: '{from} to {to} {count} itens',
                firstTooltip: 'First',
                previousTooltip: 'Previous',
                nextTooltip: 'Next',
                lastTooltip: 'Last'
            },
            header: {
                actions: 'Actions'
            }
        }
    }

    useEffect(() => {
        setChecked(prev => !prev);

        async function loadUsers() {
            const response = await api.get('/users');
            setTableData(response.data);
        }

        loadUsers();
    }, [])

    return (
        <>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

            <Fade in={checked} style={{ transitionDelay: checked ? '300ms' : '0ms' }}>
                <div className={classes.root}>
                    <MaterialTable editable={config.editable} options={config.options} localization={config.localization} title="Usuários" columns={config.columns} data={tableData} actions={config.actions}></MaterialTable>
                </div>
            </Fade>
        </>
    );
}

export default User;

Этот код работает и перечисляет пользователей, которые у меня есть в моей базе данных. Мой следующий шаг - создать Popover для действий Block и Delete, чтобы показать пользователю вопрос, чтобы подтвердить, действительно ли он хочет удалить или заблокировать пользователя на линии. Я просмотрел документацию по material-ui (https://material-ui.com/components/popover/) как я могу использовать Popover с моей таблицей, но я не могу этого сделать. Я думаю, что не могу использовать эту опору aria-describedby={id}, но я не знаю.

Кто-нибудь может помочь мне добиться этого или помочь найти способ?