How can I componentize TextFields into a function rather than writing multiple TextFeilds?

There is a lot to read here, but there is no other way to explain the issue I have.

I have four files, App.js, Intakes.js, IntakeDetails.js and Sizing.js. I start on the Intakes page where the user is presented with a table of data. The user clicks on a row and is taken to IntakeDetails. In IntakeDetails, there are four MUI tabs, one of which is Sizing.

The user never actually goes to a Sizing page. They only get to IntakeDetails. From IntakeDetails, the user can view, edit, and create data based on what tab they are in. If the user wants to create or update Sizing data, they navigate to the sizing tab and click the edit icon on the row of their choice from the Sizing table. The Dialog then pops up and its TextFields are populated with the data from the row the user clicked.

Sizing.js is 600+ lines long. 211 lines in this file are taken up by the MUI dialog which displays the data from the table row the user has clicked. The dialog is so long because of 19 TextFields. I want to make a short function with a parameter for id, value and label. This way I wont need to have lots of multiline TextFields. All of the TextFields in the Dialog take up 8 lines. With a function, this could be just one or two lines.

I have made a function to shorten the file previously, but it introduces a new problem. If I have a TextField that is populated with the word 'Hello', and I edit it, the Dialog disappears, reappears, and focus is lost on the TextField I edited, but, the change I made is persistent. I can only enter or remove one character at a time before having to click on the TextField again to enter another. I can copy and paste full words and sentences at once, but again the Dialog disappears and comes back.

I can't use .map because my data is not divided into groups or objects. It is all one object and needs to be presented in the dialog in a specific order, which is why they are hardcoded. When I type in a TextField, there is a long delay between the time I press a key on the keyboard and the time the character appears in the TextField. This delay gets longer when I type faster.

The return in IntakeDetails is here:

import Sizing from "./Sizing";
...
return (
  <div class="aspectwrapper">
    <div class="content">
      <Container>
        <Paper>
          <Box  sx={{ width: "100%" }}>
            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
              <Tabs value={value} onChange={handleChange}>
                <Tab label="Intake Details" {...a11yProps(0)} />
                <Tab label="Sizing" {...a11yProps(1)} />
              </Tabs>
            </Box>
            <TabPanel value={value} index={0}>
              ** Intake Details Stuff **
            </TabPanel>
            <TabPanel value={value} index={1}>
              <Sizing />
            </TabPanel>
          </Box>
        </Paper>
      </Container>
    </div>
  </div>
)

The return in Sizing. There are 19 TextFields, all structured as seen below. There are also buttons in a <DialogActions> tag which I have not included here.

const onTextChange = (e) => {
  const id = e.target.id;
  var value = e.target.value;
  setSingleSizing({ ...singleSizing, [id]: value });
};
...
return(
  <div id="sizing-container">
    <Dialog open={open} onClose={handleClose} maxWidth={"xl"}>
      <DialogTitle id="form-dialog-title">Edit estimation</DialogTitle>
      <DialogContent>
        <Box>
          <TextField
            id="SizingComments"
            value={singleSizing?.SizingComments}
            label={"Estimation Comments"}
            onChange={onTextChange}
            variant="outlined"
            style={{ margin: "1em", minHeight: "1em", minWidth: "15em" }}
          />
        </Box>
        </Box>
      </DialogContent>
    </Dialog>
  </div>
)