Nested Arrays with Material UI

[joe-narvaez]

I have the following tabbed form. A category maps to ui tabs and params map to fields.

import { Button, Tab, Tabs, TextField } from "@material-ui/core";
import { useImmer } from "use-immer";
import { Formik } from "formik";
import { useState } from "react";
import { Category } from "../types/pipeline";
import { TabPanel } from "../components/util/TabPanel";

const Sandbox = (): JSX.Element => {
  const [categories] = useImmer<Category[]>([
    {
      name: "Some Tabbed Cat",
      params: [{ name: "int", value: 0, type: "int" }],
    },
  ]);
  const [currentTab] = useState<string>(categories[0].name);
  return (
    <Formik
      initialValues={categories}
      onSubmit={(values): void => console.log(values, "---values")}
    >
      {(f): JSX.Element => (
        <form onSubmit={f.handleSubmit}>
          <Button>Create Task</Button>
          <Tabs value={currentTab}>
            {f.values.map((category) => (
              <Tab
                key={category.name}
                label={category.name}
                value={category.name}
              />
            ))}
          </Tabs>
          {f.values.map((cat) => (
            <TabPanel key={cat.name} value={cat.name} index={currentTab}>
              {cat.params.map((param) => (
                <TextField
                  onChange={f.handleChange}
                  name={param.name}
                  value={param.value}
                />
              ))}
            </TabPanel>
          ))}
        </form>
      )}
    </Formik>
  );
};

f.handleChange is not controlling the form. I need to use Material UI TextField component. Is <FieldArray/> a possible solution?