Sup guys! Can I have some help to understood this assessment challenge? I've allready send it, but a horrible doubt keep bouncing on my head:

I was ordered to complete a simple React app, that loads user input in a component, and pass those data as props to another component, rendered from another one. Something like this:

function DataInput(){

const [input, setInput]=useState({
firstName:'',
lastName:'',
phone:'',
)}

function handleChange(e){
setInput({
...input,
[e.target.name]:e.targe.value;
)}
}

function handleSubmit(){
/* dunno if this function is usefull to something. Can't figure out how to pass props from
   a child ( DataInput ) to another one ( ContactList)without using Redux to store a Global State.
*/
}

return(
<form>
<input 
type="text"
name="firstName"
placeholder="First Name"
value={input.firstName}
onChange={handleChange}
/>

<input 
type="text"
name="lastName"
placeholder="Last Name"
value={input.lasttName}
onChange={handleChange}
/>

<input 
type="text"
name="phone"
placeholder="Phone Number"
value={input.phone}
onChange={handleChange}
/>
<button onClick={handleSubmit}>Add User</button>
</form>

)}

function ContactList(props){
return(
<div>
<label>{props.firstName}</label>
<label>{props.lastName}</label>
<label>{props.phone}</label>    
</div>
)}

function App(){
render(){
<IngresoDatos />
<ContactList />
}
}

ReactDOM.render(<App/>, document.getElementById('root'))