So I need to show "Yes" or "No" in the dropdown, but to pass "admin" or "member" to api. Right now I'm doing it via ternary operator, checking either e.target.value or I also checked state "role" when passing it to api request, and it worked. But is there any other, nicer and more reliable way?

 export function EditableRole({
      employee,
      onSave,
      onCancel,
    }: EditableRoleProps) {

  const [role, setRole] = useState("MEMBER");

  const handleSave = () => api.updateUser(role)


  return (
    <div className={styles.wrapperEditable}>
      <Dropdown
        className={styles.dropdownRole}
        options={["Yes", "No"]}
        value={role}
        onChange={(e) =>
          setRole(e.target.value === "Yes" ? Role.ADMIN : Role.MEMBER)
        }
      />
      <Icon name="tick" onClick={() => handleSave()} />
      <Icon name="cancel" onClick={onCancel} />
    </div>
  );
}

Below is my Dropdown component:

export interface DropdownProps {
  label?: string;
  id?: string;
  options: string[];
  value: string;
  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
  className?: any;
}

export function Dropdown({
  label,
  id,
  options,
  onChange,
  className,
}: DropdownProps) {
  return (
    <div className={styles.wrapper}>
      <label className={styles.labeltext} htmlFor={id}>
        {label}
      </label>
      <select
        id={id}
        className={cx(className, styles.dropdown)}
        onChange={onChange}
      >
        {options.map((option) => (
          <option key={option}>{option}</option>
        ))}
      </select>
    </div>
  );
}