Can not select MUI Autocomplete options

I am trying to use <Autocomplete/> for searching members with member name or their company name like there are two members.

Name: "user 1"
company: ""
id:1

Name: "user 2"
company:"company 1"
id:2

now if I search user 2 user 2 should come. if I search company 1 user 2 should come.

Here is codesandbox.io for this https://codesandbox.io/s/distracted-bassi-tqm7e?file=/src/App.tsx:766-1850

I have this working but the problem I am facing is while customizing options UI.

I want to display company in smaller font and grey color and member name in regular font.

And I have a styled option, but now I can't select that options.

Here is my code.

<Autocomplete
    id="free-solo-demo"
    freeSolo
    options={suggestion}
    onSelectCapture={(e) => { console.log(e) }}
    getOptionLabel={(option: any) =>
        `${option.name} ${option.companyName}`
    }
    selectOnFocus={true}
    renderOption={(option: any) => {
        console.log("option");
        console.log(option);
        return <h4>{`${option.key}`}</h4>;
    }}

    onChange={(event, value) => HandleUserProfile(value)}
    renderInput={(params) => (
        <TextField
            {...params}
            placeholder="Search..."
            onChange={handleChange}
        />
    )}
/>

from Recent Questions - Stack Overflow https://ift.tt/3rlRjEI
https://ift.tt/eA8V8J