I am currently working on a react component that filters some data and the component's primary use is that as a user types, it filters the data and outputs the data for the user to choose from. The data output is also clickable. Right now, my options are being listed like this:

picture 1

However, I would like this to be presented in a more dropdown fashion, instead of just listing them. For instance, like googles search results page:

picture 2

Here is my part of code that renders the options. The label part is what is presenting my options, but a more dropdown fashion would be nice that would be underneath or attached to the search bar. any advice would be helpful. Thanks a ton!

 return (
    <Fragment>
    <input type="text" placeholder="Enter Brewery Name" style={{ width: "40%", marginTop: "10px"}}
    className="search-box" onChange ={(debounce((e) => searchBreweries(e.target.value)))} />
        {searchBrews && searchBrews.map((brew) => {
        return (
            <ul>
                <label class="search" name="state" onClick={() => history.push({
                    pathname: '/BrewDetails', 
                    currentbrew: brew})}>
                        <option value="AL">{brew.name}</option>
                    </label>
                    
            </ul>
        )
    })
}
    </Fragment>

);

}