I want to make mui textfield with array

Question

what my task is I am using TextFiled according to the Array but the issue is not able to change this all value dynamically I am aware I can use the index to this task based on ternary conditions.

const TextField = () => {
  
  return (
    <>
      <Card sx={{ mt: 4 }} variant="outlined">
        <CardContent>
          <Grid container spacing={{ xs: 2, md: 3 }}>
            {Array.fill("").map((data, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                 <TextField
                  id="outlined-basic"
                  label={data}
                  name={index === 0}
                  size="small"
                  variant="outlined"
                  value={data}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
      </Card>
    </>
  );
};

Answer 1

import React from "react";
import {
  Grid,
  Card,
  CardContent,
  Box,
  CardActions,
  TextField,
  Button
} from "@mui/material";
import { useFormik } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object().shape({
  organisationName: Yup.string().required("Required!"),
  organisationID: Yup.string().required("Required!"),
  manager: Yup.string().required("Required!")
});

const AddNewTeam = () => {
  const teamForm = useFormik({
    initialValues: {
      organisationName: "",
      organisationID: "",
      manager: "",
      branch: "",
      product: ""
    },
    validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    }
  });
  console.log(teamForm);
  return (
    <>
      <Card sx={{ mt: 4 }} variant="outlined">
        <CardContent>
          <Grid container spacing={{ xs: 2, md: 3 }}>
            {Array.from([
              "organisationName",
              "organisationID",
              "manager",
              "branch",
              "product"
            ]).map((data, index) => (
              <Grid item xs={12} sm={6} md={3} key={index}>
                <TextField
                  id="outlined-basic"
                  label={data}
                  name="organisationName"
                  size="small"
                  variant="outlined"
                  value={teamForm.values.data}
                  onBlur={teamForm.handleBlur}
                  onChange={teamForm.handleChange.bind(this)}
                  error={Boolean(teamForm.errors.data)}
                  helperText={teamForm.errors.data}
                />
              </Grid>
            ))}
          </Grid>
        </CardContent>
        <CardActions>
          <Box
            display="flex"
            flexGrow={1}
            alignItems="center"
            justifyContent="flex-end"
            flexDirection="row"
          >
            <Button
              variant="contained"
              color="primary"
              onClick={teamForm.handleSubmit}
            >
              Add team
            </Button>
          </Box>
        </CardActions>
      </Card>
    </>
  );
};

export default AddNewTeam;