Как использовать опору valueComponent для рендеринга выбранного элемента, если я использую optionsRenderer в response-select

Скажем, у меня есть компонент реакции-выбора со следующими реквизитами. Я использую синтаксис мопса.

В моем раскрывающемся списке все параметры отображаются правильно, и все параметры настраиваются с использованием свойства optionsRenderer ...

Что я получаю (как и ожидалось)

Однако результаты, которые я получаю, заключаются в том, что входное значение - это просто текст, на который я ссылался в моем поле option.label. В первом варианте Custom - это мой ключ ярлыка.

Чего я хочу достичь

используйте valueComponent, чтобы в раскрывающемся списке параметров отобразить именно тот HTML-код, который отображает средство визуализации параметров.

Так, конечно, можно улучшить стиль :)

...

  Select(
    options=this.getOptions()
    optionRenderer=customOption
    valueComponent=customOption // this doesn't work
    valueKey="id"
  )

Функция ниже ожидаема optionRenderer реквизитами и выполняет итерацию по предоставленным параметрам.

const customOption = (option) => pug`
  div
    strong #{option.label}
    p #{option.renderMethod}

  div
   strong $#{option.otherHTMLData}
`

Но valueComponent ожидает только 1 статический компонент. Поэтому любая функция вроде () => <span>Will show this</span>

Как получить параметр, выбранный для использования в качестве входного значения с помощью valueComponent?