Как использовать компоненты (например, меню DropDown) в компоненте класса в пользовательском интерфейсе материала

Question

Я хочу использовать компоненты (например, меню DropDown) в компоненте класса в Material Ui. Я использую Material-UI, и я использую класс Component for. я использую машинопись с пользовательским интерфейсом материала. но я хочу использовать компонент. Но я не могу понять, как это сделать. Я использую машинопись с пользовательским интерфейсом материала.

import React, { Component } from 'react'
import ApiService from "../../service/ApiService";
import DeleteIcon from '@material-ui/icons/Delete';
import Typography from '@material-ui/core/Typography';
import { Grid } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

class CategoryListUserComponent extends Component<any,any>{

    constructor(props: any){
        super(props)
        this.state = {
            users: [],
            message: null
        }
        this.deleteUser = this.deleteUser.bind(this);
        this.editUser = this.editUser.bind(this);
        this.addUser = this.addUser.bind(this);
        this.reloadUserList = this.reloadUserList.bind(this);
    }


    render() {

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };



        return (
            <Grid>
                 <Typography variant="h4" align="left" style={style}>Category List</Typography>
                <Button variant="contained" color="primary" onClick={() => this.addUser()}>
                    Add Category
                </Button>
                <Grid  container   className="listContainer">
<div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>

            </Grid>
            </Grid>
        );
    }

}

const style ={
    display: 'flex',
    justifyContent: 'center'
}

export default CategoryListUserComponent;