Dynamic Naming textfield in MUI data Grid

Question

I am using MUI data grid and first columns values (Asset description) comes from an array and the headers Meember1, Member2 and... also comes from an array, I need to enter a specific values into each fields to insert record into DB using using react-redux. I need different names for all cells which are associated with member and assets shown in below image pasted.

Now, my question is how to generate dynamic names for each cells based on column and row which u see in the above image? thanks for your help.

Here is my code for both columns and rows.

const membersName = ["Member1", "Member2", "Member3"]; 
const assetTypes = [
    { id: 1, assetTitle: "Cash", assetType: "cash" },
    { id: 2, assetTitle: "Checking Accounts", assetType: "checkAccount" },
    { id: 3, assetTitle: "Other", assetType: "other" },
  ];

// columns for currency values

const assetFileds = membersName.map((items, index) => {
    const name = "cash" + index;
    const newObject = {
      field: "member_" + index,
      headerName: items,
      flex: 1.0,
      disableClickEventBubbling: true,
      sortable: false,
      disableColumnMenu: true,
      renderCell: (params) => (
        <>
          <CurrencyValue
            fullWidth={false}
            // defaultValue={params.row.description}
            variant="standard"
            name={name}
            value={values.name}
            onChange={handleChange}
          />
          <BackupIcon
            onClick={doOpenModal}
            visibility={!values.name ? "hidden" : "visible"}
          />
        </>
      ),
    };
    return newObject;
  });

const columnForAssetTypes = {
    field: "assetTitle",
    headerName: "Asset Description",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
  };

  //render final columns
  const renderColumns = (array, index, newItem) => {
    return [...array.slice(0, index), newItem, ...array.slice(index)];
  };
  const finalColumns = renderColumns(assetFileds, 0, columnForAssetTypes);
  //set columns and rows
  //const columns = columnsOld;
  const columns = finalColumns;
  const rows = assetTypes;



 return (
    <Container>
      <div className="about-yourself">
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <div className="about-header d-flex">
              <span className="icon-w-bg-l">
                <img src={ChildCareProviderImage} alt="App user" />
              </span>
              <h3> Asset information</h3>
            </div>
            <div style={{ height: 400, width: "100%" }}>
              <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                //disableSelectionOnClick
              />
            </div>
          </Grid>
        </Grid>
      </div>
 </Container>
  );

Answer 1

I changed the rows to below and now gets different name for all cells in the grid:

const rows = assetTypes.map((item, index) => {
        const initialObj = {
          id: index + 1,
          assetTitle: item.assetTitle,
          assetType: item.asstType,
        };
        return membersName.reduce((a, b) => {
          return {
            ...a,
            [b]: null,
          };
        }, initialObj);
      });