我有一个组件，它是一个像这样的MUI选项卡

<Box sx={{ width: "100%" }}>
  <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
    <Tabs
      value={value}
      onChange={handleChange}
      aria-label="basic tabs example"
    >
      <Tab label="Item One" {...a11yProps(0)} />
      <Tab label="Item Two" {...a11yProps(1)} />
      <Tab label="Item Three" {...a11yProps(2)} />
    </Tabs>
  </Box>
  <TabPanel value={value} index={0}>
    <Child1 />
  </TabPanel>
  <TabPanel value={value} index={1}>
    <Child2 />
  </TabPanel>
  <TabPanel value={value} index={2}>
    Item Three
  </TabPanel>
  <Box>
    <Button onClick={submittab}>Submit</Button>
  </Box>
</Box>

如前所述，有两个子组件，其中包含一些文本字段。
我尝试实现的是读取parent中的子数据，并将其作为单个对象提交给API。
请帮帮忙
沙盒之下
https://codesandbox.io/s/naughty-shadow-u2icz1?file=/demo.tsx:1233-1962
请注意我是打字员
这是我的子组件1

import { FormLabel, TextField } from "@mui/material";
import react, { useState } from "react";

function Child1() {
  const clientObj = {
    user: {
      name: "",
      age: ""
    }
  };
  const [client, setClient] = useState(clientObj);

  const handlechange = (event: { target: { name: any; value: any } }) => {
    const { name, value } = event.target;
    setClient((prevState) => ({
      ...prevState,
      context: {
        ...prevState.user,
        [name]: value
      }
    }));
  };
  return (
    <>
      <FormLabel>Name</FormLabel>
      <TextField
        name="name"
        id="text-id"
        value={client.user.name}
        onChange={handlechange}
      />
      <FormLabel>Age</FormLabel>
      <TextField
        name="name"
        id="text-id"
        value={client.user.name}
        onChange={handlechange}
      />
    </>
  );
}

export default Child1;