React JS Fluent ui onRenderTitle

Question

Hello I am new to reactcand have to use fluent ui

I am trying to chnage a custom optionlabel with

onRenderTitle={(options) => ${options.name} (${options.roll_number})}

Mycode:

<Dropdown
  placeholder={"Select your School"}
  onChange={(event, val) => {
  if (val === null) {
  setSelectedSchool("")
  } else {                                                                       
  setSelectedSchool(val.key);
  }
   }}

  value={selectedcounty}

   options={getschool.filter(x => x.county === selectedcounty).map((school, key) => (
   {
     key: school.name, text: school.name
   }
    ))}
       onRenderTitle={(options) => `${options.name} (${options.roll_number})`}
/>

Im getting

The result that I want:

Answer 1

onRenderTitle is a function which returns Element not String. Type of options is IDropdownOption[]

<Dropdown
  ...
  onRenderTitle={options => <span>{options[0].key} ({options[0].text})</span>}
/>

Codepen example.