useState for Dropdown elements – ReactJS

Your Dropdown onChange should be something like this

 const onChange = (e, {value}) => {
    setValues({...values, role: value});
 }

Refer to controlled input demo here: https://react.semantic-ui.com/modules/dropdown/#usage-controlled

EDIT: If you don’t want to update your onChange function then perhaps this would do it.

<Dropdown
    placeholder="Select Role"
    fluid
    selection
    options={options}
    value={values.role}
    onChange={(e, {value}) => onChange({
     target: {name: 'role', value}
    })}
/>