Is there a way to render clickable option tags inside a datalist element?

I have an autocomplete search field inside a form element, and under the input tag I have a datalist to which I render my outocompleted options based on the user input-

 <form autoComplete="on">
            <div className="ui action input mini">
                <input type="text" list="autocomplete" className="searchInput"
                    onChange={event => setTerm(event.target.value)} value={term} />
                <button className="ui icon button" onClick={(e)=>submitChosenUser(e)}>
                <i className="search icon"></i></button>
            </div>
            {autocompleteSuggestions.length > 0 ?
                <datalist id="autocomplete">
                    {RenderAutocompleteUserList()}
                </datalist> : null}                    
        </form>

My RenderAutoCompleteUserList function looks like this-

    const RenderAutocompleteUserList = () => {
    return (
        autocompleteSuggestions.map((user) => {
            return <option key={user.id} id={`${user.id}`} value={`${user.firstName} ${user.lastName}`} path={`${user.path}`}></option>            
        })
    )
}

I want to make every option tag clickable, so I can re-direct to the chosen user profile page. Currenty I need to choose the user and click on the search button for that to happen.

Is there a way to make the option clickable with javascript only?

Thank you!