Rendering User api data, through constant variable in React Native - reactjs

Question

I am trying to render my Users api data, through variable contact in ProfileComponent, but variable contact isn't assigning to the item data. When I console.log(data), it responds with all the information, such as profile_picutre, banner_picture, first_name, ect, which is what I need. I know I'm close but I don't understand why the contact varible isn't grabbing the data item.
I think my problem would be solved if I can get item together with newContact, but I don't know. Also sorry if my question is bare, I'm still trying to learn all the react native terminologies. If someone could help point me in the right direction, I would greatly appreciate that.
PS: I'm using axios to fetch my api, and using useContext to store my user, with my provider.
const ProfileScreen = () => {
const {params: {item = {}} = {}} = useRoute();
const {
contactsDispatch,
contactsState: {
getProfile: {data, loading, error},
},
} = useContext(GlobalContext);
useEffect(() => {
getProfile()(contactsDispatch);
}, []);
const contactsRef = useRef([]);
const prev = contactsRef.current;
contactsRef.current = data;
const newList = contactsRef.current;
const newContact = newList.find(
(item) => !prev.map((i) => i.id).includes(item.id),
);
console.log(data)
return (
<ProfileComponent
data={data}
loading={loading}
contact={data}
/>
);
};
export default ProfileScreen;
const ProfileComponent = ({
contact,
...,
...,
}) => {
const {
profile_picture,
banner_picture,
first_name,
phone_number,
last_name,
bio,
username,
file,
caption,
} = contact;
return(
...
)
)}

Answer 1

contactsRef.current must be a NodeElement.
Considering data is a NodeElement:
Objects coming from context start as undefined, so you need to check them first:
useEffect(() => {
if(getProfile != undefined && contactsDispatch != undefined) {
getProfile()(contactsDispatch);
}
}, [contactsDispatch, getProfile]);