Customize handleOptionClick in renderOption of MUI Autocomplete - reactjs

Question

So this is my code:
{/* Search suggestions Autocomplete Field */}
{suggestionsFetched && <Autocomplete
disablePortal
id="combo-box-demo"
options={searchSuggestions?.salons.map((salon) => ({
type:'salon',
id:salon.id,
label:salon.name.toLowerCase()
}))
.concat(searchSuggestions?.services.map((service) => ({
type:'service',
id:service.id,
label:service.name.value.toLowerCase()
})))}
renderOption={(props, option) => {
return (
<li
{...props}
key={option.id}
>
<span style={{
fontWeight:'bolder',
textTransform:'capitalize'
}}>{option.type}:</span>
{"\u00A0"}
<span style={{
textTransform:'capitalize'
}}>{option.label}</span>
</li>
);
}}
popupIcon={<Search color='secondary' />}
sx={{
width: '100%',
[`& .${autocompleteClasses.popupIndicator}`]: {
transform: "none"
}
}}
renderInput={(params) => <TextField placeholder="Search" {...params} />}
/>}
The data I am displaying are of 2 types: salon and service. I want the default behaviour of selecting the option and displaying it. But I also want to set a state value to the type. The purpose of this is to direct to specific route based on the type.
Now since I know that the onClick function is set in the props, how do I override it. This is what I did and it did not work:
{suggestionsFetched && <Autocomplete
disablePortal
id="combo-box-demo"
options={searchSuggestions?.salons.map((salon) => ({
type:'salon',
id:salon.id,
label:salon.name.toLowerCase()
}))
.concat(searchSuggestions?.services.map((service) => ({
type:'service',
id:service.id,
label:service.name.value.toLowerCase()
})))}
renderOption={(props, option) => {
return (
<li
{...props}
onClick={()=>{
setSearchRoute(option.type)
props.onClick()
}}
key={option.id}
>
<span style={{
fontWeight:'bolder',
textTransform:'capitalize'
}}>{option.type}:</span>
{"\u00A0"}
<span style={{
textTransform:'capitalize'
}}>{option.label}</span>
</li>
);
}}
popupIcon={<Search color='secondary' />}
sx={{
width: '100%',
[`& .${autocompleteClasses.popupIndicator}`]: {
transform: "none"
}
}}
renderInput={(params) => <TextField placeholder="Search" {...params} />}
/>}
In the above code, I tried to reset the onClick prop, set my state and then call the default onClick function. But it threw this error:
TypeError: Cannot read properties of undefined (reading 'currentTarget')
How to resolve this and override default onClick prop? Or is it impossible?

Answer 1

So I found the solution. I just needed to write an onChange function
value={selectedSuggestion}
onChange={(event, newValue) => {
setSearchRoute(newValue.type)
setSelectedSuggestion(newValue);
}}
The newValue argument is actually the object passed in the options props.
This is so obvious and I don't know why it took me so long to figure out