how to hide particular option in select tag in mui react-CodePudding

in that select tag by default Click is a disabled option and hidden.so when I want to click the select that time I don't want to show the disable option in the list so that's why I give hidden attribute.so how is it possible to set an option which is showing by default and when user want to click the select tag that disable option should not visible like in normal select tag if you give any option disable hidden property ,I also give that two property but hidden is not working .How can I do that

import * as React from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10} disabled hidden>Click</MenuItem>
          <MenuItem value={11}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </Box>
  );
}

CodePudding user response：

Try placing style={{ display: "none" }} on the MenuItem you want hidden.