React values not updating through when rendering to child component - reactjs

Question

Please i need help
i am a beginer using react
I find it difficult get values and i just hope my explanation is clear
What will i do or which other approch is best for this
i want to get value={} from main <Controller> and pass it through render={} to be used in the child component <PhoneInput> the value={phone}
is an object that consist of arrays
this is the content of phone
[
{
country: 'bs',
phoneNumber: '122 234 4309',
label: 'Mobile',
},
{
country: 'bs',
phoneNumber: '898 776 9087',
label: 'Work',
},
];
the best of my knowledge is what i did but not it working
My aim is to enable user to add more phone number field by their self
i want a user to be able to delete field or add more phone field
Sample Image
<Controller
control={control}
name="phones"
value={phones} //phone is an array
render={({ field: { onChange, className, value, ref } }) => ( // Transfering value from value={phones} to use as value.map not working
<div className={clsx('mt-32', className)} ref={ref}>
{value.map((item, index) => ( //the value here becomes undefined
<PhoneInput
value={item}
key={index}
onChange={(val) => {
console.log(value);
onChange(value.map((_item, _index) => (index === _index ? val : _item)));
}}
onRemove={() => {
console.log(value);
onChange(value.filter((_item, _index) => index !== _index));
}}
hideRemove={value.length === 1}
/>
))}
<Button
className="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
onClick={() =>
onChange([...testPhone, Model().phoneNumbers[0]])
}
>
<span className="ml-8 font-medium text-secondary group-hover:underline">
Add a phone number
</span>
</Button>
</div>
)}
/>
if i send the value directly it works fine
<Controller
control={control}
name="phones"
value={phones}
render={({ field: { onChange, className, value, ref } }) => (
// <div className={clsx('mt-32', className)} ref={ref}>
{phones.map((item, index) => ( //Using variable phone directly
<PhoneInput
value={item}
key={index}
onChange={(val) => {
console.log(phones);
onChange(phones.map((_item, _index) => (index === _index ? val : _item)));
}}
onRemove={() => {
console.log(phones);
onChange(phones.filter((_item, _index) => index !== _index));
}}
hideRemove={phones.length === 1}
/>
))}
<Button
className="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
onClick={() =>
onChange([...phones, Model().phoneNumbers[0]])
}
>
<span className="ml-8 font-medium text-secondary group-hover:underline">
Add a phone number
</span>
</Button>
</div>
)}
/>
Here is the complete code
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import {
Button,
Card,
} from '#mui/material';
import clsx from 'clsx';
import { Controller, useForm } from 'react-hook-form';
import axios from 'axios';
import PhoneInput from '../../PhoneInput';
import Model from '../../Model';
/**
* Form Validation Schema
*/
const schema = yup.object().shape({
phone: yup.string().required('Phone is required'),
});
function Settings() {
const { control, watch, reset, handleSubmit, formState, getValues } = useForm({
mode: 'onChange',
resolver: yupResolver(schema),
});
const [phones, setPhones] = useState([]);
useEffect(() => {
axios.get('/api/v1/account').then((res) => {
if (res.data.success === true) {
setPhones(res.data.phones);
}
});
}, []);
return (
<Card
component={motion.div}
variants={IT}
className="w-full overflow-hidden w-full mb-32"
>
<div className=" p-24 w-full">
<Controller
control={control}
name="first_name"
render={({ field }) => (
<TextField
className="mt-32"
{...field}
label="First Name"
placeholder="First Name"
id="first_name"
error={!!errors.first_name}
helperText={errors?.first_name?.message}
variant="outlined"
required
fullWidth
/>
)}
/>
<Controller
control={control}
name="phones"
value={phones}
render={({ field: { onChange, className, value, ref } }) => (
<div className={clsx('mt-32', className)} ref={ref}>
{phones.map((item, index) => (
<PhoneInput
value={item}
key={index}
onChange={(val) => {
console.log(phones);
onChange(phones.map((_item, _index) => (index === _index ? val : _item)));
}}
onRemove={() => {
console.log(phones);
onChange(phones.filter((_item, _index) => index !== _index));
}}
hideRemove={phones.length === 1}
/>
))}
<Button
className="group inline-flex items-center mt-2 -ml-4 py-2 px-4 rounded cursor-pointer"
onClick={() =>
onChange([...phones, Model().phoneNumbers[0]])
}
>
<span className="ml-8 font-medium text-secondary group-hover:underline">
Add a phone number
</span>
</Button>
</div>
)}
/>
</div>
</Card>
);
}
export default Settings;
Thank you very much