Generating Ids of inputs Ffierlds dynamically

Am working on an application which has some input fields on a row, On the side there is an addition icon whereby when the user clicks an additional row is added dynamically containing the input fields. I want to generate the ids of the proceeding inputs field dynamically when the user clicks on the add button icon. Am doing this in react. Thanks

{Array.from(Array(counter)).map(() => (
            <div className="row">
              <div className="col-sm-2">
                <Box sx={{ minWidth: 120 }}>
                  <FormControl fullWidth>
                    <InputLabel id="demo-select-small">Sales Type</InputLabel>
                    <Select
                      labelId="demo-select-small"
                      id="demo-select-small"
                      // value={salesTypex || ""}
                      // key={c}
                      label="Age"
                      sx={{ minHeight: 40 }}
                      // fullWidth
                      onChange={handleOnChange}
                      // onChange={(e) => handleOnChange(e.target.value)}
                    >
                      <MenuItem value="1">Product</MenuItem>
                      <MenuItem value="2">Company Sales</MenuItem>
                      <MenuItem value="3">Custom Service</MenuItem>
                    </Select>
                  </FormControl>
                </Box>

               
              </div>
              <div className="col-sm-2">
                <Box sx={{ minWidth: 120 }}>
                  <FormControl fullWidth>
                    <TextField
                      id="outlined-error-helper-text"
                      label="First Name"
                      size="small"
                      // defaultValue="Hello World"
                      // helperText="Incorrect entry."
                    />
                  </FormControl>
                </Box>
              </div>
            </div>
          ))}