Reactjs 如何使用服务器中的数据自动填充表单字段

我在Reaction中创建了一个表单.当用户在‘Gage ID’字段中输入值时，如果该值存在于数据库中，则系统应根据该输入自动填充其他字段.我怎样才能在react 中做到这一点呢？ 我的密码是:

function WorkOrderRef() {
  const [form] = Form.useForm()
  const [id, setId] = useState()
const [gageInfo, setGageInfo] = useState()
const meta = {
    columns: 2,
    fields: [
      {
        key: "Id",
        label: "ID",
        placeholder: "",
        onChange: (e) => setId(e.target.value),
      },
      {
        key: "description",
        label: "Description",
        placeholder: "",
        //value: referenceData.name,
      },
      {
        key: "serial number",
        label: "Serial Number",
        placeholder: "",
      },
      {
        key: "due date",
        label: "Due Date",
        placeholder: "",
        widget: "date-picker",
      },
      {
        key: "colibration",
        label: "Colibration",
        widget: "select",
        options,
      },
    ],
  }
useEffect(() => {
    try {
      if (id) {
        console.log(id)
        fetch(`api/id=${id}`)
          .then((result) => result.json())
          .then((response) => setGageInfo(response))
      }
    } catch (e) {
      console.log(e)
    }
  }, [id])
return (
    <Fragment>
        <Form form={form} onFinish={handleFinish}>
          <FormBuilder meta={meta} form={form} />
          <Form.Item className="ant-form-item--btn">
            <Button type="primary" htmlType="submit">
              Add
            </Button>
          </Form.Item>
        </Form>
</Fragment>
  )
}

export default WorkOrderRef

实际上，我可以从服务器获取与"gage id"相关的数据，但我发现在表单域中显示该数据具有挑战性.我怎样才能在react 中做到这一点呢？