Synchronizing Nested Array Within An Object In UseState Hook

I have defined a useState object as follow: const [groupDetails, setGroupDetails] = React.useState([ { fullName: '', phoneNo: '', gender: '' }, ]); const [state, setState]

Solution 1:

React State hooks are working async so you shouldn't wait state change after the setState call. You can catch the end of state change via useEffect.

useEffect(() => {
    setGroupDetails(groupDetails);
    setState(prevState => ({...prevState, detailsOfPeople: groupDetails}) );
}, [groupDetails]);