in the select tag initially icon is not showing ,its right. If you click the dropdown you observe the icon is showing its ok, but if you select any one option then again if you click the dropdown that icon is not showing, at the first time the flow is correct but after selecting one option then again if you select the dropdown then the icon is not showing ,how to fix that

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>
  );
}