React : retrieve the state of a child component - reactjs

Question

I am trying to retrieve the value of the input in my Input component, to assign it to my user object in the parent component.
Here is my user object and my JSX:
const Form = ({ form }) => {
const [inputValue, setInputValue] = useState("");
const user = {
user_firstname: "OO",
user_lastname: "OO",
user_email: "lOOl0jyyv",
user_password: "OO"
};
return (
<form className="form" onSubmit={callApi}>
<Input
key={uuidv4()}
className="input_container"
type="text"
placeholder="Prénom"
id="firstname"
name="firstname"
min="2"
max="40"
/>
<Input
key={uuidv4()}
className="input_container"
type="text"
placeholder="Nom"
id="lastname"
name="lastname"
min="2"
max="60"
/>
<Input
key={uuidv4()}
className="input_container"
type="email"
placeholder="Votre adresse mail"
id="email"
name="email"
/>
<Input
key={uuidv4()}
className="input_container"
type="password"
placeholder="Mot de passe"
id="password"
name="password"
min="10"
max="32"
/>
<Input
key={uuidv4()}
className="input_container"
type="password"
placeholder="Confirmez le mot de passe"
id="verify-password"
name="verify-password"
min="10"
max="32"
/>
<Button name="Inscription" />
</form>
);
};
Each has its own state, I would like to be able to retrieve it from the parent component to assign them to my "user" object. This is my Input component :
const Input = ({
className,
type,
id,
name,
placeholder,
min,
max,
icon1,
icon2
}) => {
const inputHandler = e => {
setInputValue(e.target.value);
};
const [inputValue, setInputValue] = useState("");
return (
<div className={className}>
<input
className="testt"
type={type}
id={id}
name={name}
placeholder={placeholder}
minLength={min}
maxLength={max}
required
value={inputValue}
onChange={inputHandler}
/>
{icon1 && (
<div className="icons_container">
<FontAwesomeIcon icon={icon1} />
<FontAwesomeIcon icon={icon2} />
</div>
)}
</div>
);
};

Answer 1

Why not define the state in the parent element, then pass a reference to the state in the props of the child? In your case, place the input state of all the <Input /> components in the <Form /> component and pass each state to its respective input field.

Answer 2

You can pass onChange handler function as a prop from parent to child. This function will set value for user when child (Input) component invokes the function.
Changes needed for parent component:
...
const [user, setUser] = React.useState({
user_firstname: "OO",
user_lastname: "OO",
user_email: "lOOl0jyyv",
user_password: "OO"
});
return (
<form className="form" onSubmit={callApi}>
<Input
key={uuidv4()}
className="input_container"
type="text"
placeholder="Prénom"
id="firstname"
name="firstname"
min="2"
max="40"
onChange={value => setUser({ ...user, user_firstname: value })}
/>
...
Changes needed for Input component:
const Input = ({
className,
type,
id,
name,
placeholder,
min,
max,
icon1,
icon2,
onChange
}) => {
const inputHandler = e => {
setInputValue(e.target.value);
onChange(e.target.value);
};
...