How to pass a html tag in the value of select input in React js?

Question

I am trying to map values in the input field of a select tag but for some reason it gives me [Object object] . When I am not passing another tag in the return of the map statement, the output is coming fine. But I guess there is some other way of using html tags in the select value attribute. The react hook used is:

                const [categories, setCategories] = React.useState([])

And the return statement is:

                <label className="filter-label" for="country" multiple>Filter By Category</label>
                            <select id="country" name="country" className="search-input" 
                            onChange={e => setCategories([...categories, e.target.value])} 
                            value={categories.map(category => <ChipList key={category} 
                            data= {category} />)}
                            >
                                <option>{categories.length < 1 ? 
                                "Select category" : 
                                categories.map(category => <ChipList key={category} data={category} 
                                />)}</option>
                                <option value="australia1">Select category1</option>
                                <option value="australia2">Select category2</option>
                                <option value="australia3">Select category3</option>
                            </select>

In short how to write something like value={<p>Hello</p>} in the value attribute of select input without getting [Object object]

Answer 1

do u want that on UI inside select it should be shown as

<p>Hello</p>

or just Hello ?