Reactjs как сделать так, чтобы при добавлении кнопкой рандомное кол-во форм, в них инпуты работали независимо друг от друга?

Как сделать так, чтобы в добавленных формах состояние работало независимо от изменения в других аналогичных формах?

 const LocationBody = ({filteredServersData, locationAdd, 
   deleteLocationCell, handleChangeFilter, 
   filters, locationsData, envsData }) => {
   const classes = useStyles();

const locationsSelect = locationsData.map((item) => {
   return <MenuItem key={item.locationID} value={item.locationID}>{item.name}</MenuItem>;
})

const envsSelect = envsData.map((item, index) => {
   return <MenuItem key={index} value={item.envID}>{item.name}</MenuItem>;
})

const serversSelect = filteredServersData.map(item => <Typography variant="h6" component="h1">
{item.name}
</Typography>)

   return (
      <div>
         {locationAdd.map(i => <Container className={classes.root} key={i.id}>
            <Grid container spacing={3} className="arr">
               <Grid item xs={12}>
                  <Box display="flex" justifyContent="space-between">
                     <Typography variant="h5" component="h1">
                        Тестовая локация {i.id}
                     </Typography>
                     <IconButton
                        aria-label="delete" color="secondary"
                        className={classes.margin}
                        onClick={() => deleteLocationCell(i)}>
                        <DeleteIcon fontSize="medium" />
                     </IconButton>
                  </Box>
               </Grid>
               <Grid item xs={12} className={classes.filtersContainer}>
                  <Box display="flex" justifyContent="space-between">
                     <Box display="flex" className={classes.fieldsContainer}>
                        <Typography variant="h6" component="h1">
                           Локация
                  </Typography>
                        <FormControl variant="outlined">
                           <Select
                              value={filters.locationID}
                              onChange={handleChangeFilter}
                              label="LocationID"
                              labelId="locationID"
                              name="locationID"
                           >
                              {locationsSelect}
                           </Select>
                        </FormControl>
                        <FormControl variant="outlined">
                           <Select
                              value={filters.envID}
                              onChange={handleChangeFilter}
                              label="EnvID"
                              labelId="envID"
                              name="envID" >
                              {envsSelect}
                           </Select>
                        </FormControl>
                        {serversSelect}
                     </Box>
                  </Box>
               </Grid>
            </Grid>
         </Container>)}
      </div>
   )
}