Javascript 如何在React js中传递select input值中的html标记？

我正在尝试映射select标记的输入字段中的值，但由于某种原因，它给了我

[Object Object]

。当我没有在map语句的返回中传递另一个标记时，输出就正常了。但是我想在selectvalue属性中使用html标记还有其他方法。 使用的反应钩是：

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

返回语句是：

                <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>

按类别筛选
setCategories（[…categories，e.target.value]））
value={categories.map（category=>）}
>
{categories.length<1？
“选择类别”：
categories.map（category=>）}
选择类别1
选择类别2
选择类别3

---

简而言之，如何在选择输入的value属性中编写类似

value={Hello
}

的内容，而不获取[Object Object]

是否希望在用户界面上的select中显示为

<p>Hello</p>

你好

---

或者只是

Hello

？

我想显示Hello。但是value属性不接受任何html标记或任何其他组件