The following code

import React from 'react';
import { useForm, Controller, useFieldArray } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Select, MenuItem, TextField, Button } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';
import * as z from 'zod';

// Define Zod schema
const nestedSchema = z.object({
  file: z.string().nonempty("File is required"),
  start: z.string().nonempty("Start is required"),
  value: z.string().nonempty("Value is required"),
  delimiter: z.string().nonempty("Delimiter is required"),
});

const schema = z.object({
  fieldId: z.string().nonempty("Field ID is required"),
  fileName: z.string().nonempty("File Name is required"),
  nestedArray: z.array(nestedSchema),
});

const App = () => {
  const { control, handleSubmit, setValue, watch } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      fieldId: '',
      fileName: '',
      nestedArray: [{ file: '', start: '', value: '', delimiter: '' }],
    },
  });

  const { fields, append } = useFieldArray({
    control,
    name: 'nestedArray',
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  

  const columns = [
    { field: 'fieldId', headerName: 'Field ID', width: 150 },
    { field: 'fileName', headerName: 'File Name', width: 150 },
    {
      field: 'nestedArray',
      headerName: 'Nested Array',
      width: 400,
      renderCell: (params) => (
        <div>
          {params.value.map((item, index) => (
            <div key={index}>
              <Controller
                name={`nestedArray.${index}.file`}
                control={control}
                render={({ field }) => (
                  <Select {...field} fullWidth>
                    <MenuItem value="">Select File</MenuItem>
                    <MenuItem value="file1">File 1</MenuItem>
                    <MenuItem value="file2">File 2</MenuItem>
                  </Select>
                )}
              />
              <Controller
                name={`nestedArray.${index}.start`}
                control={control}
                render={({ field }) => (
                  <Select {...field} fullWidth>
                    <MenuItem value="">Select Start</MenuItem>
                    <MenuItem value="start1">Start 1</MenuItem>
                    <MenuItem value="start2">Start 2</MenuItem>
                  </Select>
                )}
              />
              <Controller
                name={`nestedArray.${index}.value`}
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label="Value"
                    fullWidth
                    value={field.value || ''}
                    onChange={(e) => field.onChange(e.target.value)}
                  />
                )}
              />
              <Controller
                name={`nestedArray.${index}.delimiter`}
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label="Delimiter"
                    fullWidth
                    value={field.value || ''}
                    onChange={(e) => field.onChange(e.target.value)}
                  />
                )}
              />
            </div>
          ))}
        </div>
      ),
    },
  ];

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="fieldId"
        control={control}
        render={({ field }) => (
          <Select {...field} fullWidth>
            <MenuItem value="">Select Field ID</MenuItem>
            <MenuItem value="field1">Field 1</MenuItem>
            <MenuItem value="field2">Field 2</MenuItem>
          </Select>
        )}
      />
      <Controller
        name="fileName"
        control={control}
        render={({ field }) => (
          <TextField {...field} label="File Name" fullWidth />
        )}
      />
      {fields.map((item, index) => (
        <div key={item.id}>
          <Controller
            name={`nestedArray.${index}.file`}
            control={control}
            render={({ field }) => (
              <Select {...field} fullWidth>
                <MenuItem value="">Select File</MenuItem>
                <MenuItem value="file1">File 1</MenuItem>
                <MenuItem value="file2">File 2</MenuItem>
              </Select>
            )}
          />
          <Controller
            name={`nestedArray.${index}.start`}
            control={control}
            render={({ field }) => (
              <Select {...field} fullWidth>
                <MenuItem value="">Select Start</MenuItem>
                <MenuItem value="start1">Start 1</MenuItem>
                <MenuItem value="start2">Start 2</MenuItem>
              </Select>
            )}
          />
          <Controller
            name={`nestedArray.${index}.value`}
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Value"
                fullWidth
                value={field.value || ''}
                onChange={(e) => field.onChange(e.target.value)}
              />
            )}
          />
          <Controller
            name={`nestedArray.${index}.delimiter`}
            control={control}
            render={({ field }) => (
              <TextField
                {...field}
                label="Delimiter"
                fullWidth
                value={field.value || ''}
                onChange={(e) => field.onChange(e.target.value)}
              />
            )}
          />
        </div>
      ))}
      <Button type="button" onClick={() => append({ file: '', start: '', value: '', delimiter: '' })}>
        Add Nested Field
      </Button>
      <Button type="submit">Submit</Button>
      <div style={{ height: 400, width: '100%' }}>
        <DataGrid
          columns={columns}
          rows={[
            {
              id: 1,
              fieldId: '',
              fileName: '',
              nestedArray: fields,
            },
          ]}
          pageSize={5}
        />
      </div>
    </form>
  );
};

export default App;

from above code Nested array fields we would be displaying them in MUI data grid in the form rows..
Now here nested Array of fields which are file and start were Mui select drop whenever the user changes the value it is able to render the MUi select but problem with field of value and delimiter where it has MUI text field like input field whenever the user enter value ..entered value getting disappearing from MUI text fields of Value and Delimiter ,even i have put console statement onchange those are not printing and also MUI text field were not rendering ?