I am using React semantic UI. I am rendering a dropdown. I have written code such that, once an option is selected, the options text is shown in the field. But when I select an option from the dropdown, the selected value's text is not displayed, rather it shows an empty field.

Here is my dropdown code:

options = [
  { key:"a", value: 1, name: 'uni',  text: "first"},
  { key:"b", value: 2, name: 'duo',  text: 'second'},
  { key:"c", value: 3, name: 'tri',  text: ' third'},
  { key:"d", value: 4, name: 'quart', text: 'fourth'},
  { key:"e", value: 5, name: 'cinq',  text: 'sixth'},
  { key:"f", value: 6, name: 'dernier', text: 'last'}
];

 const  handleDropDownSelect = (event, data) => {
    onChangeValue(data.value)

  };
  const Dropdown = () => (
return(
      <Dropdown
          placeholder = abc"
          fluid
          selection
          options={options}
          onChange={handleDropDownSelect}

      />)

 <DropDownContainer className="Dropdown">
            <Dropdown />
 </DropDownContainer>

onChangeValue is a function I am using in a different component where I get the value from this dropdown and update other components. So the issue is, when I select an option, the text should be shown in the dropdown field, not left blanc