How to use the material-ui-popup-state/hooks.usePopupState function in material-ui-popup-state

const ScheduleAddCell = withStyles(styles)((props) => {
    const { classes, section, courseDetails, term } = props;
    const popupState = usePopupState({ variant: 'popover' });

    const closeAndAddCourse = (scheduleIndex) => {
        popupState.close();
        for (const meeting of section.meetings) {
            if (meeting.time === 'TBA') {
                openSnackbar('success', 'Online/TBA class added');
                // See Added Classes."
                break;
            }
        }

        if (scheduleIndex !== -1) {
            addCourse(section, courseDetails, term, scheduleIndex);
        }
    };

export default function MenuAppBar() {
    const classes = useStyles();
    const navMenuState = usePopupState({ variant: 'popover', popupId: 'navMenu' });
    const profileMenuState = usePopupState({ variant: 'popover', popupId: 'profileMenu' });
    const user = useCurrentUser();
    const logoutButtonClick = () => {
        logOut();
        profileMenuState.close();
    };
    const throwException = () => {
        throw new Error('Exception');
    };
    return (

const SectionEnrollmentCell = withStyles(styles)((props) => {
    const {
        classes,
        numCurrentlyEnrolled,
        maxCapacity,
        numOnWaitlist,
        numNewOnlyReserved,
    } = props;
    const popupState = usePopupState({ variant: 'popover' });

    return (
        
            <div>
                <strong>
                    {`${numCurrentlyEnrolled.totalEnrolled}` +
                        ' / ' +
                        `${maxCapacity}` +
                        '\n'}
                </strong>
                {`WL: ${numOnWaitlist}` + '\n' + `NOR: ${numNewOnlyReserved}`}
            </div>

const Submenu = (props) => {
    const popupState = usePopupState({ variant: 'popover' });

    return (

export default function MenuAppBar() {
    const classes = useStyles();
    const navMenuState = usePopupState({ variant: 'popover', popupId: 'navMenu' });
    const profileMenuState = usePopupState({ variant: 'popover', popupId: 'profileMenu' });
    const user = useCurrentUser();
    const logoutButtonClick = () => {
        logOut();
        profileMenuState.close();
    };
    const throwException = () => {
        throw new Error('Exception');
    };
    return (