Dynamically generate UI elements

Question

I want to generate JSX for UI dynamically in real time . I tried creating UI element to this below array

{[...Array((this.state.updatedNumOfLayer))].map((value, index) => {
console.log("updatedNumOfLayer "+ this.state.updatedNumOfLayer)
                          return(
                                <TextField
                                  id="outlined-read-only-input"
                                  label=""
                                  value={"Layer " + (index + 1)}
                                  // className={classes.textField}
                                  margin="dense" style={{ height: 38 }}
                                  InputProps={{
                                    readOnly: true,
                                    disableUnderline: true,
                                    style: { fontSize: 12, padding: 10 }
                                  }}
                                  variant="standard"
                                  size="small"
                                />
                               )
                              })}

My UI element is generating as per the value of 'this.state.updatedNumOfLayer'. Now I want to generate UI element in real time(When user is passing the value in textfield )

does anyone know how to I accomplimsh or any guidance, reference appreciated.