Im creating this to do list in React + JS, and ran into a problem where i want to change Type of status dropdown so you only have an icon of the selected value when dropdown is unopened. when opened. i want all other values to have text + icon. like this:

Right now i cannot get it so it just shows the icon at all times. this is the code of the Component + items array. anyone that has any idea, would be appreciated

const items = [
          {id: 1, type: "in_review", name: "In Review", icon: '????'},
          {id: 2, type: "in_progress", name: "In Progress", icon: '????'},
          {id: 3, type: "todo", name: "Todo", icon: "????"},
          {id: 4, type: "done", name: "Done", icon: "☑️"},
          {id: 5, type: "canceled", name: "Canceled", icon: "????"}

      ]

Component:

import React from 'react';

function TypeSelector({ option, handleOptionChange, items }) {
    return (
        <select value={option.type} onChange={handleOptionChange}>
            {items.map((item) => (
                <option key={item.id} value={item.type}>
                    {item.icon} {item.name}
                </option>
            ))}
        </select>
    );
}

export default TypeSelector;

Right now it works as in it shows it like this:
And i want the top value, which is the only one showing when not opening the dropdown., to be just the icon.