How customize material ui select

Question

I'm trying to customize material-ui dropdown, to make it something like this, here is the link https://codesandbox.io/s/busy-black-2fgdn?file=/src/App.js,

if I write 1 in the input (from) it selects the option that starts with 1 instead of writing in input, if none of the options starts with the number entered in the input then it writes in the input,

Answer 1

Use Autocomplete with freeSolo as a prop. check the docs here => https://mui.com/components/autocomplete/#free-solo

const dataList = [
  { title: "10-100", value: "10-100" },
  { title: "100-200", value: "100-200" },
  { title: "200-300", value: "200-300" },
  { title: "300-400", value: "300-400" }
];
...

<Autocomplete
    id="free-solo-demo"
    freeSolo
    options={dataList.map(option => option.title)}
    renderInput={params => <TextField {...params} label="select or type" />}
/>

code sandbox => https://codesandbox.io/s/winter-cloud-y401t?file=/src/App.js