Reactjs 如何打开锚定到div的材质UI菜单打开？

我不想让菜单响应按钮。我希望它永远存在。我正在努力：

import React, { useState, createRef } from 'react';
import { Box, Menu, MenuItem } from '@material-ui/core';

const DEFAULT_ELEVATION = 2;

interface ITypeSelector {
  title: string;
  description: string;
  documentId: string;
  selected?: boolean;
  disabled: boolean;
}

export default function Prediction({
  title,
  description,
  documentId,
  selected,
  disabled
}: ITypeSelector) {
  const boxEl = createRef<HTMLElement>()

  const predictions = ['a', 'b', 'c']

  return (
    <span ref={boxEl}>
      <Menu
        id="simple-menu"
        anchorEl={boxEl}
        keepMounted
        open={true}
      // onClose={handleClose}
      >
        {predictions.map((prediction, idx) => <MenuItem key={idx}>{prediction}</MenuItem>)}
      </Menu>
    </span>
  );
}

import React，{useState，createRef}来自“React”；
从'@material ui/core'导入{Box，Menu，MenuItem}；
const DEFAULT_ELEVATION=2；
接口类型选择器{
标题：字符串；
描述：字符串；
documentId：字符串；
选择？：布尔值；
禁用：布尔值；
}
导出默认函数预测({
标题
描述
文档ID，
挑选出来的，
残废
}：itype选择器）{
const boxEl=createRef（）
常数预测=['a'，'b'，'c']
返回(
{predictions.map（（prediction，idx）=>{prediction}）
);
}

但是菜单挂在左上角（不是我想要的下方或跨度）

---

我做错了什么？

你试过安可罗里金吗？请张贴作为答案，以便我可以接受