How to match pairs of inputs in react usestate dynamically?

See more:

Javascript

React

ReactJS

Consider this:

<>
<input type="text" placeholder={props.placeholder} className="optionsInput" />
<input type="text" placeholder={props.placeholder} className="optionsInput" />
</>;

I add the component above which is pair of inputs dynamically by a button.
The most important thing is these pairs are related to each other and I need to match them.
For example:

<>
First Input: First Name
Second Input: Last Name
</>

I want to save data by using `onChange` event but in a form like this:

const [data, setData] = useState([
  {First Input: First Name, Second Input: Last Name}
]);

But I don't know how to solve this.
*Note*: Consider that these inputs are added automatically and can be added to 100 times.
Every help will be appreciated.

What I have tried:

I don't have any idea how to solve the problem I have.