Peace my friends

so i have an component in react which contains of approx. 12 constants like the following:

const postsOffCountry = <td>{props.posts.map((post => {return <input key={post.ref} defaultValue={post.oland} className={post.ref}
onBlur={(event) => props.variables.setOffCountry(event.target.value)}></input>}))}</td>;

and im rendering them like following:

return (
<>
<tbody>
  <tr onClick={(e) => console.log(e.target.value)}>
    <td>{postsRef}</td>     
    <td>{postsOpInf}</td>
    <td>{postsState}</td>
    <td>{postsInf}</td>
    {/* <td>{postsLoadingDate}</td> */}
    <td>{postsLoadingCountry}</td>
    <td>{postsLoadingZip}</td>
    <td>{postsLoadingCity}</td>
    {/* <td>{postsOffDate}</td> */}
    <td>{postsOffCountry}</td>
    <td>{postsOffZip}</td>
    <td>{postsOffCity}</td>
    <td>{postsCustomerClearence}</td>
    <td>{postsPalNumber}</td>
    <td>{postsOrganiser}</td>
    <td>{postsUpdateButton}</td>
    <td>{postsMailButton}</td>
  </tr>
</tbody>  
</>
);

my problem is how can i select all the values of the input fields and set them to their correct useState variable which is passed over from the parentcomponent with props. (e.g. props.variables.setOffCity());

i have been stuck on this for days now any help would be highly appreciated!