How to place input'a elements inside select'a?

Question

JavaScript

I am working on one project, a chat, in which it is necessary to implement sorting. In the finished version, sorting should occur after selecting the required option'a from the list. Moreover, one option must contain two input'a, in which you can enter some values. This is a range sort.
How can this be done? I write in react. Something tells me that this is not very correct, but I'm not sure.
Tell me how this can be done. Or the best way to do it. List screen:

Answer 1

It seems to me that this is a custom select should be done)

Answer 2

Use some kind of dropdown plugin, and hang sorting on plugin events. Or write your solution.