React send child component data to parent component and POST request - reactjs

Question

I'm trying to send data from Child component to parent component using call back function.
This is my parent component
const handleSubmit = async (e) => {
e.preventDefault()
try {
const response = await promiseApp.post('/promises', {
id: "",
uuid: "",
content: promise,
date: date,
time: time,
place: place,
phone_number: phone
})
addPromise(response.data.promise)
history.push('/promises')
} catch (err) {
alert("An error has occured")
console.log(err)
console.log('zzzzzzzz')
}
}
const updateNumbersInParent = (number) => {
console.log(number)
console.log('hhhhhhhhhh')
let value = number.map((element) => {
return element.newNumber
})
console.log(value)
for (let i = 0; i < value.length; i++) {
console.log(value[i])
setPhone(value[i])
}
}
return (
<div className="tile is-parent">
<article className="tile is-child box">
<PhoneNumber phone={phone} setPhone={setPhone} onChange={value => setPhone(value)}
updateNumbersInParent={updateNumbersInParent}/>
</article>
</div>
)
This is my child component
function PhoneNumber (props) {
// const [count, setCount] = useState(1)
const [phoneNumber, setPhoneNumber] = useState([])
const addNumberButton = (e) => {
e.preventDefault()
addPhoneNumber(props.phone)
props.setPhone('')
}
const addPhoneNumber = (newNumber) => {
const addNewPhoneNumber = [...phoneNumber, {newNumber}]
setPhoneNumber(addNewPhoneNumber)
props.updateNumbersInParent(addNewPhoneNumber)
}
const deletePhoneNumber = (number) => {
const filteredPhoneNumbers = phoneNumber.filter(currentPhoneNumbers => (currentPhoneNumbers !== number))
setPhoneNumber(filteredPhoneNumbers)
props.updateNumbersInParent(filteredPhoneNumbers)
}
return (
<>
<p className="title">Type a phone number and click add</p>
<div className="field">
<div className="control">
<button className="button is-primary" onClick={addNumberButton}>Add</button>
<p><b>No. of phone numbers:</b></p>
<input className="input is-danger" pattern='^\+[1-9]\d{1,14}$' value={props.phone} onChange={e => props.onChange(e.target.value)} type="tel" placeholder="Enter your phone number here"></input>
<p>(Format: [phone])</p>
</div>
<ul>
{phoneNumber.map((number, index) => {
return (
<>
<li key={index}>{number.newNumber}</li>
<button onClick={() => deletePhoneNumber(number)}>Delete</button>
</>
)
})}
</ul>
</div>
</>
)
}
I can see that the data from Child component has been passed to the Parent component but keep getting an error when I do POST request. phone_number property in the parent component has an empty value every time I do the POST request.