Semantic UI React dropdown - How to display only unselected options?

Question

I'm building a React app, I have a UI Semantic React dropdown that allows the user to select a currency, currently "Euro" or "Dollar". Then the selected currency is stored in State currency:

  const [currency, setCurrency] = useState('Euro');

Dropdown code:

export const CurrencyDropdown = ({ currency, setCurrency }) => {

  const currencies = [
    {
      key: 'Euro',
      text: 'Euro',
      value: 'Euro',
    },
    {
      key: 'Dollar',
      text: 'Dollar',
      value: 'Dollar',
    },
  ];

  const handleChange = (e, { value }) => {
    setCurrency({ value }.value);
  };

  return (
    <Dropdown
      fluid
      button
      className="mini"
      selection
      options={currencies}
      onChange={handleChange}
      value={currency}
    />
  );
};

Everything works fine, the only thing is when the user clicks to open the dropdown, I'd like the dropdown to display only the unselected currency option in the list of options (i.e. if "Euro" is selected, dropdown would show the unselected option "Dollar" to click ), and not both currency options like it is now: dropdown current behaviour.

Of course, when closed the dropdown would still display the selected option ("Euro" in this case).

Is there a way to do it in semantic UI ? Thanks for your help.

Answer 1

I finally solved it with CSS.

.active.selected.item {

  display: none  !important;
  
}