Material-UI网站如何在其AppBar中创建下拉选择？

import React from 'react';
import { AppBar, Toolbar, Typography, Select, MenuItem } from '@material-ui/core';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
];

const App = () => {
  const [selectedOption, setSelectedOption] = React.useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">Material-UI App</Typography>
          <Select value={selectedOption} onChange={handleOptionChange}>
            {options.map((option) => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </Select>
        </Toolbar>
      </AppBar>
      {/* 其他内容 */}
    </div>
  );
};

export default App;