antd+react select下拉搜索，option匹配不到内容，就把输入内容新增到下拉option

antd+react 实现通过下拉搜索，检测option数据，如果没有匹配的数据，就把输入的内容新增到option下拉数据中
效果图

用到的antd API ：dropdownRender，onSearch

<Form.Item
   label="品牌名称"
   name="brandName"
   >
      <Select
         allowClear
         filterOption={(input, option) =>
           option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
         }
     	 onSearch={test}
		 placeholder={'品牌名称'}
         showSearch
         dropdownRender={menu => (
         	<div>
			    {menu}
			    {selectFlag && <div>
			        <Divider style={{ margin: '4px 0' }} />
			        <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
			            <Input style={{ flex: 'auto' }} disabled={true} defaultValue={name} value={name} onChange={onNameChange} />
			            <a
			                style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
			                onClick={addItem}
			            >
			                新增
			            </a>
			        </div>
			    </div>}
			</div>
          )}
		>
        	{brandlist.map((item,index) => <Option key={index} value={item.brandName}>{item.brandName}</Option>)}
	</Select>
</Form.Item>

const [selectFlag, setSelectFlag] = useState(false);
const [name, setName] = useState(null);//要添加的数据
const [brandlist, setBrandList] = useState([]);   // 获取到的option数组

// 获取商品列表
const getBrandList= debounce((brandName)=>{
   saleproductbrandname({  // 获取列表的接口
     pageSize:10,
     brandName
   }).then(res=>{
      if(res.code===200){
         setBrandList(res.data.list)
      }
   })
 },500)



const test = (val) => {
  if (!val) {
     setSelectFlag(false);
        return;
   }
   let flag = brandlist.some(v => v.brandName === val);
   setSelectFlag(!flag);
   setName(val);
}
const onNameChange = (event) => {
  setName(event.target.value)
}
// 新增
const addItem = (event) => {
  let data = [...brandlist].concat([{
     brandName: name,
  }])
  setBrandList(data);
  setName(null);
  setSelectFlag(false);
}