en la etiqueta de selección, el icono inicial no se muestra, está bien. Si hace clic en el menú desplegable, observa que el ícono muestra que está bien, pero si selecciona una opción, luego nuevamente si hace clic en el menú desplegable, ese ícono no se muestra, al principio el flujo es correcto pero después de seleccionar una opción, luego nuevamente si selecciona el menú desplegable y luego el ícono no se muestra, cómo solucionarlo

 import * as React from "react"; import Box from "@mui/material/Box"; import { BsFillArrowDownSquareFill } from "react-icons/bs"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import Select from "@mui/material/Select"; import { ListItemIcon } from "@mui/material"; export default function BasicSelect() { const [age, setAge] = React.useState(""); const [selected, setClicked] = React.useState(false); const handleChange = (event) => { setAge(event.target.value); setClicked(true); }; 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}> Ten {selected ? null : ( <ListItemIcon> <BsFillArrowDownSquareFill /> </ListItemIcon> )} </MenuItem> <MenuItem value={20}> Twenty {selected ? null : ( <ListItemIcon> <BsFillArrowDownSquareFill /> </ListItemIcon> )} </MenuItem> <MenuItem value={30}> Thirty {selected ? null : ( <ListItemIcon> <BsFillArrowDownSquareFill /> </ListItemIcon> )} </MenuItem> </Select> </FormControl> </Box> ); }