I am trying to display all friends in my app but when I try to do that its not display username in the friend card and when I try to log frienlist it logs something like this how can i fix this issue with my code and display all friends in each friendcard? whats the problem with my code?

 LOG  {"profileImg": "https://instagram.fblr4-1.fna.fbcdn.net/v/t51.2885-19/44884218_345707102882519_2446069589734326272_n.jpg?_nc_ht=instagram.fblr4-1.fA&ccb=7-5&ig_cachccb7-5&oh=00_AfDmkQvsFt6bnAcrb4NwKah7lGmEPX5H9EXtBcumC1waJw&oe=63C9F90F&_nc_sid=cff2a4", "username": "User2"}

Files:

const Friends = ({ navigation }) => { 

const [friendsList, setFriendsList] = useState([]);

useEffect(() => {
    GetFriends();
}, [])

const GetFriends = async () => {
    try {
        const loggeduser = await AsyncStorage.getItem('user');
        const loggeduserobj = JSON.parse(loggeduser);
        const res = await fetch('http://10.0.2.2:3000/friends', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ user_id: loggeduserobj.user._id })
        });
        const data = await res.json();
        setFriendsList(data.friends[0])
    } catch (error) {
        console.error(error);
    }
}

console.log(friendsList.username)
return (
    <View style={styles.container}>
        <BottomNavigation navigation={navigation} page={'friends'} />
        <TextInput placeholder="Search" style={styles.searchbar} placeholderTextColor='white'
            onChangeText={(text) => {
                setKeyword(text)
            }}
        />
        <Text style={styles.FriendsText}>Your Friends</Text>
        {
            friendsList.length !== 0 ? <FlatList
                data={friendsList}
                renderItem={({ item }) => (
                    <FriendCard key={item.username} user={item} navigation={navigation} />
                )}
            />
                :
                <Text style={styles.formHead2}>You don't have any friends</Text>
        }
    </View>
);
}

export default Friends;

Friend Card:

const FriendCard = ({ user, navigation }) => {

return (
    <View>
        <TouchableOpacity onPress={() => navigation.navigate('userprofile', { user: user })}>
            <View style={styles.ChatCard}>
                {user.profileImg ? (
                    <Image source={{ uri: user.profileImg }} style={styles.image} />
                ) : (
                    <Image source={defaultprofileImg} style={styles.image} />
                )}
                <View style={styles.c1}>
                    <Text style={styles.username}>{user.username}</Text>
                </View>        
            </View>
        </TouchableOpacity>
    </View>
);
}

export default FriendCard

>Solution :

Flatlist renders the list of data but you are setting the object in State variable just change setFriendsList(data.friends[0]) to setFriendsList(data.friends) it will fix your issue.