从React Dynamic表单读取值并使用onSubmit

Question

我已经基于JSON输入生成了一个表单，现在我无法读取值并执行onsubmit，我不知道要传递的value属性是什么，下面是生成表单的代码

代码沙箱链接：https://codesandbox.io/s/icy-sunset-506xo?file=/src/App.tsx:0-896

import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/TextField";
import "./styles.css";

export default function App() {
  const inputs = [
    { label: "FirstName", type: "text", id: "firstName" },
    { lalabelblel: "LastName", type: "text", id: "lastName" }
  ];
  let rowContents = [];
  const contents = inputs.reduce((acc, p, i) => {
    rowContents.push(
      <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg3" key={p.label}>
        <TextField
          label={p.label}
          name={p.id}
          className={p.id}
          id={p.id}
          data-id={i}
        />
      </div>
    );
    if (i % 5 === 4) {
      acc.push(<div className="ms-Grid-row">{rowContents}</div>);
      rowContents = [];
    }
    return acc;
  }, []);
  contents.push(<div className="ms-Grid-row">{rowContents}</div>);

  return <div className="App">{contents}</div>;
}