可以使用Popper组件来解决这个问题。修改代码如下：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import Popper from '@material-ui/core/Popper';
import MenuList from '@material-ui/core/MenuList';
import MenuItem from '@material-ui/core/MenuItem';

function App() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  return (
    
      
        
          My App
        
        
          Menu
        
        
          {({ TransitionProps, placement }) => (
            

              
                Option 1
                Option 2
                Option 3
              
            
          )}
        
      
    
  );
}

export default App;

这个例子中使用了Popper组件来处理下拉菜单的位置。我们设置anchorRef为按钮的元素引用，并将anchorEl设置为