Adding input fields dynamically in javascript using class

I have a couple of fields that I want to duplicate dynamically when the user clicks on the Add button and then take the fields data. I have found a number of tutorials online such as Tutorial where a state is used to dynamically create new input fields and record the data. However, my application is inside a class and I would like to find the equivalent version to achieve the same inside a class. My code is as follows

class SerialQRScanClass extends React.PureComponent<Props, State> {
    protected getBulkRegistrationView(): JSX.Element {
        const [serialRegistrationTracker, setserialRegistrationTracker] = useState([]);

    const handleAdd = () => {
      const addNewField = [...serialRegistrationTracker, []];
      setserialRegistrationTracker(addNewField);
    };

return (
      <Paper elevation={3} className={classes.paper1}>
        <Button onClick={() => handleAdd()}> ADD NEW FIELD </Button>
        {serialRegistrationTracker.map((data, index) => {
          return (
            <div key={index}>
              <Grid container alignItems='flex-end'>
                <Grid item className={classes.gridItem}>
                   {getTextFieldForSmall(
              <Typography variant='caption'>{appLanguages.serialRangeStart[lang]} 
              </Typography>,
                    appLanguages.serialInputSampleStart[lang],
                    serialRangeFrom || '',
                    (e) => this.handleChangeFromSerials(e.target.value),
                    Boolean(fromErrorMessage) || false,
                    fromErrorMessage || '',
                 )}
              </Grid>
            </Grid>
           </div>
          );
        })}

}
}

I want to repeat the input field everytime I click the 'ADD NEW FIELD' Button.