Javascript 如何在 React 中动态添加项目以 Select 标签选项(下拉菜单)

我正在制作一个动态表单组件，它从用户和

const addNewEmp=()=>{
      61 |     setEmpList((data)=>({
      62 |         inputValue: '',
    > 63 |         emplist: [
         | ^  64 |             ...data.emplist,
      65 |             {
      66 |                 empName: data.inputValue

我做了几处修改，但都不知道出了什么问题.我的代码

import React, { useState } from 'react'

const Select = () => {
    const [inputValue,setInputValue] = useState('')
    const [emplist, setEmpList] = useState([
        {
            empName: '---Select---'
        }
    ]);


  const  addNewEmp=()=>{
      setEmpList((data)=>({
          inputValue: '',
          emplist: [
              ...data.emplist,
              {
                  empName: data.inputValue
              }
          ]
      }))
  }

      let empRecords = emplist.map((data) => {
        return <option>{data.empName}</option>;
      });

    return (
      <>
       
        <input
          type="text"
          placeholder="add options"
          onChange={(e)=> setInputValue(e.target.value)}
        />
         <button onClick={addNewEmp}>Add +</button>
        <br />
         <select>{empRecords}</select>
         {inputValue}
       
      </>
    );
}

export default Select