Adding Multiple Divs and Inputting Values with React/Material UI

I am having an issue with adding multiple divs to a React page and sending the inputted values to an API. Right now I have a button that adds a div which has an text input box that a user inputs an answer to. However, each time a new box is made, the user's answer stores based on states, which takes in a letter at a time. Here is the code for the new div that is made:

const AnotherName = (key) => (
<div id={countOfOtherNames}>
  <GridContainer>
    <GridItem xs={6} sm={6} md={6}>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </GridItem>
  </GridContainer>
</div>

);

I don't know how to make multiple states each time a box is opened, but that seems like a naive way to do it. Is there a better way to store each input after the user finishes typing?