How can I add row at the bottom of MUI table on button click in react?

I am using MUI Table to display data. This is how my table looks like. I want to add row at the bottom of previous row so that user can add data to it just like in a previous row, when "+" button is clicked. Tried alot but I wasn't able to find solutions online. How can I achieve this? Thanks in advance.

This is my code:

function createData(
    sr,
    itemName,
    goDown,
    batch,
    expiry,
    qty,
    bonus,
    price,
    disc,
    total,
    tax,
    pct
  ) {
    return {
      sr,
      itemName,
      goDown,
      batch,
      expiry,
      qty,
      bonus,
      price,
      disc,
      total,
      tax,
      pct,
    };
  }


  const rows = [createData(1, "A", 0, 0, 0.0, 0.0, 0, 0, 0, 0, 0, 0)];



 <TableContainer component={Paper}>
              <Table
                sx={{
                  minWidth: 650,
                }}
                aria-label="simple table"
              >
                <TableHead>
                  <TableRow>
                    <TableCell>Sr.#</TableCell>
                    <TableCell> Item Name</TableCell>
                    <TableCell>Go Down</TableCell>
                    <TableCell>Batch</TableCell>
                    <TableCell>Expiry</TableCell>
                    <TableCell>Qty</TableCell>
                    <TableCell>Bonus</TableCell>
                    <TableCell>P.Price</TableCell>
                    <TableCell>Disc %</TableCell>
                    <TableCell>Total (Exc Tax)</TableCell>
                    <TableCell>S/Tax Schedule</TableCell>
                    <TableCell>PCT Code</TableCell>
                    <TableCell></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map((row) => (
                    <TableRow key={row.supplier}>
                      <TableCell component="th" scope="row">
                        {row.sr}
                      </TableCell>

                      <TableCell align="center">
                        <Select
                          style={{ width: "100px" }}
                          showSearch
                          placeholder="Select an Item"
                          optionFilterProp="children"
                          filterOption={(input, option) =>
                            option.children
                              .toLowerCase()
                              .includes(input.toLowerCase())
                          }
                        >
                          <Option value="X">X</Option>
                          <Option value="Y">Y</Option>
                          <Option value="Z">Z</Option>
                        </Select>
                      </TableCell>
                      <TableCell align="center">{row.goDown}</TableCell>
                      <TableCell align="center">{row.batch}</TableCell>
                      <TableCell align="center">{row.expiry}</TableCell>
                      <TableCell align="center">
                        <MainRow>
                          <MainCol>
                            <Form.Group
                              as={MainRow}
                              controlId="formHorizontalEmail"
                            >
                              <MainCol>
                                <Form.Control
                                  style={{ width: "70px" }}
                                  onKeyDown={handleEnter}
                                  type="number"
                                />
                              </MainCol>
                            </Form.Group>
                          </MainCol>
                        </MainRow>
                      </TableCell>
                      <TableCell align="center">{row.bonus}</TableCell>
                      <TableCell align="center">{row.price}</TableCell>
                      <TableCell align="center">{row.disc}</TableCell>
                      <TableCell align="center">{row.total}</TableCell>
                      <TableCell align="center">{row.tax}</TableCell>
                      <TableCell align="center">{row.pct}</TableCell>
                      <TableCell align="center">
                        <button>+</button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>