ReactJS中如何获取下拉选择框（select）的选中值？

我在获取下拉选择框的选中值时遇到了困难，尝试调试但无法获取对应的值，也曾尝试用console.log打印e.target.value，但没有效果。请帮忙排查以下代码中存在的问题：

const [values, setValues] = useState({
    lastName: "",
    firstName: "",
    lastNameHiragana: "",
    firstNameHiragana: "",
    birthday: "",
    sex: "",
    telephone: "",
    email: "",
    enterDate: "",
});


// inputs to be created in form
const inputs = [
     {
      id: 1,
      name: "lastName",
      type: "text",
      label: "姓",
      required: true,
    },

    {other objects in between},

    {
      id: 6,
      name: "sex",
      type: "select",
      required: true,
      values: ["男性", "女性"],
      label: "性別",
    },

]

const onChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
};


// Form makes input fields, according to the input type(defined above)
<form>
    {inputs
    .filter((input) => input.id <= 8)
        .map((input) => (
            <div key={input.id} className="mb-3">
                <label htmlFor={input.name} className="form-label m-0">
                    {input.label}
                </label>
                {input.type === "select" ? (
                    <select
                      name={input.name}
                      id={input.id}
                      className="form-select"
                      onChange={onChange}
                    >
                      {input.values.map((value) => {
                        <option value={optionValue} key={value}>
                            {value}
                        </option>
                      })}
                    </select>
                  ) : (
                    <input
                      ref={inputs.id}
                      name={input.name}
                      type={input.type}
                      className={`form-control ${styles.input} `}
                      id={input.id}
                      required={input.required}
                      onChange={onChange}
                    />
                  )}
                <span className={`text-danger text-center`}>
                    {errorMessage[input.name]}
                </span>
            </div>
        )
    )}
</form>

问题点分析： #

• option循环未返回元素：在input.values.map的回调里用了大括号{}，但没有显式返回<option>元素，导致select里根本没有渲染出可选项。要么把大括号改成小括号()，要么在大括号里加return。
• option的value变量未定义：代码里写了value={optionValue}，但optionValue这个变量从来没声明过，应该改成value={value}，把循环的当前值作为option的value。
• 额外问题：input的ref错误：非select的input里写了ref={inputs.id}，inputs是数组，应该是ref={input.id}（不过这个和select的问题无关，但会导致ref绑定错误）。

修复后的select部分代码： #

<select
  name={input.name}
  id={input.id}
  className="form-select"
  onChange={onChange}
  value={values[input.name]} // 可选：绑定当前state值，保持选中状态同步
>
  {/* 可选：添加默认提示选项 */}
  <option value="">请选择</option>
  {input.values.map((value) => (
    <option value={value} key={value}>
      {value}
    </option>
  ))}
</select>

内容的提问来源于stack exchange，提问作者raio