如何在REACT.js自定义增减字段中启用手动值文本输入

import React, { useState } from 'react';

function CustomFields() {
  const [fields, setFields] = useState([]);

  // 其他代码...

  return (
    <div>
      {/* 渲染已有字段 */}
      {fields.map((field, index) => (
        <div key={index}>
          <input
            type="text"
            value={field}
            onChange={(e) => handleFieldChange(e, index)}
          />
          <button onClick={() => removeField(index)}>删除</button>
        </div>
      ))}

      {/* 添加新字段 */}
      <button onClick={addField}>添加字段</button>
    </div>
  );
}

function handleFieldChange(e, index) {
  const newFields = [...fields];
  newFields[index] = e.target.value;
  setFields(newFields);
}

function addField() {
  const newFields = [...fields];
  newFields.push("");
  setFields(newFields);
}

function removeField(index) {
  const newFields = [...fields];
  newFields.splice(index, 1);
  setFields(newFields);
}