React嵌套对象动态更新求助：输入框同步修改对象值

我有一个嵌套对象，为简化说明，已将对象结构简化如下：

export const customerDraft = {
  _id: "6368dab51482da28ba792712",
  firstName: "Jane",
  lastName: "Doe",
  metadata: {
    birthDate: "25.07.1999",
    gender: "Female",
    status: "Adult",
  },
};

需要解决的问题如下：

• 需将对象所有键渲染为输入框供用户修改，此部分已通过递归实现，代码如下：

const Inputs = ({ data }) => {
  // const [updatedCustomerDraft, setUpdatedCustomerDraft] = useState({});

  return (
    <form style={{ display: "flex", flexWrap: "wrap", gap: "2em" }}>
      {Object.keys(data).map((key, i) => {
        if (data[key] !== null && typeof data[key] === "object") {
          return <Inputs key={i} data={data[key]} />;
        }
        return (
          <FormControl key={i}>
            <InputLabel>{key}</InputLabel>
            <Input
              defaultValue={data[key]}
              onInput={(e) => {
                const { value } = e.target;

                handleChange(key, value, data);
              }}
            />
          </FormControl>
        );
      })}
    </form>
  );
};

难点所在： #

• 用户输入时对象需动态更新，如在firstName输入“Ann”则对应值变更，gender输入“non-binary”也需同步更新。

我希望创建初始对象深拷贝，在副本上修改后返回更新对象，目前已实现深拷贝函数：

const deepCopy = (data) => {
  const newData = {};
  Object.keys(data).forEach((key, i) => {
    if (data[key] !== null && typeof data[key] === "object") {
      deepCopy(data[key]);
    }
    newData[key] = data[key];
  });
  return newData;
};

当前尝试的handleChange思路如下，但不确定是否可行：

const copiedData = deepCopy(customerDraft);

const handleChange = (key, value, data) => {
  Object.keys(data).map((i) => {
    if (typeof data[i] === "object" && data[i] !== null) {
      handleChange(key, value, data[key]);
    } // 判断键值是否为对象，是则递归遍历嵌套键

   // 需判断当前键是否匹配输入项，是则设置为输入值

  });
};

明确需求示例： 用户在status字段输入“Minor”时，新对象应如下：

export const customerDraft = {
  _id: "6368dab51482da28ba792712",
  firstName: "Jane",
  lastName: "Doe",
  metadata: {
    birthDate: "25.07.1999",
    gender: "Female",
    status: "Minor", // 替换原Adult
  },
};

求带有详细解释的解决方案反馈，万分感谢！

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