Formik within Material-UI table tags

Question

I am trying to create a material UI table where each cell is a Formik input. Unfortunately, Material UI throws errors when a Formik Object is a child of a TableBody tag or a TableItem tag.

For example: Table of Inputs

This is what the example has, without Formik:

 {rows.map(row => (
        <TableRow key={row.id}>
          <TableCell component="th" scope="row">
            {row.name}
          </TableCell>
          <TableCell align="right"></TableCell>
          <TableCell align="right">{row.fat}</TableCell>
          <TableCell align="right">{row.carbs}</TableCell>
          <TableCell align="right">{row.protein}</TableCell>
        </TableRow>
      ))} 

This is what I have and it's not working:

<TableBody>
        <TableRow>
          <Formik
            initialValues={{tasks: [
              {
                name: "Build a table w/ Formik",
                company: "Alchemy",
                monday: "2",
                tuesday: "1.2",
                wednesday: "3.2",
                thursday: "0",
                friday: "0",
              },
              {
                name: "Build something else",
                company: "Alchemy",
                monday: "2",
                tuesday: "0",
                wednesday: "0",
                thursday: "0",
                friday: "0",
              }
            ]}}
            onSubmit={values =>
              setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              }, 500) }
            render={({values}) => (
              <Form>
                <FieldArray
                  name="tasks"
                  render={arrayHelpers => (
                    <div>
                      {values.tasks && values.tasks.length > 0 ? (
                        values.tasks.map((task, index) => (
                          <TableRow key={index}>
                            <TableCell component="th" scope="row">
                              <TextField
                                name={`tasks`}
                                className={classes.textField}
                              />
                            </TableCell>
                          </TableRow>
                        ))
                      ) : null}
                    </div>
                  )}
                />
              </Form>
            )}
          />
        </TableRow>
      </TableBody>

It creates a table and recognizes that there are two tasks in the array, but does not display the input fields.

Answer 1

I recommend react-hook-form and using component="form"

<TableRow
    component="form"
    noValidate
    autoComplete="off"
    onSubmit={handleSubmit(data => console.log(data))}
>

Answer 2

Use the useFormik() hook. With it you can do something like..

const formik = useFormik(){
  initialValues:[],
  onSubmit: (v) => {}
  etc...
}

With this way Formik not gonna be a child of a tablebody tag!