如何在材质UI中使用renderOption渲染选项列表

import React from 'react';
import { MenuItem, Select, FormControl, InputLabel } from '@mui/material';

const options = [
  { value: 'apple', label: 'Apple', icon: '🍎' },
  { value: 'banana', label: 'Banana', icon: '🍌' },
  { value: 'grape', label: 'Grape', icon: '🍇' },
];

function CustomOption({ option, selected }) {
  return (
    <MenuItem key={option.value} value={option.value} selected={selected}>
      {option.icon} {option.label}
    </MenuItem>
  );
}

function MySelect() {
  const [value, setValue] = React.useState(options[0].value);

  return (
    <FormControl fullWidth>
      <InputLabel id="demo-simple-select-label">Fruit</InputLabel>
      <Select
        labelId="demo-simple-select-label"
        id="demo-simple-select"
        value={value}
        label="Fruit"
        renderOption={(props, option) => <CustomOption {...props} option={option} />}
        onChange={(event) => setValue(event.target.value)}
      >
        {options.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default MySelect;